[Angular2 Form] Reactive form: valueChanges, update data model only when form is valid

For each formBuild, formControl, formGroup they all have 'valueChanges' prop, which is an Observable.

 

  reactiveForm: FormGroup;
  video: Video;

  constructor(fb: FormBuilder) {
    this.reactiveForm = fb.group({
      // title <-- formControlName="title"
      title: [
        'Title', // <-- Default value
        [
          Validators.required,
          Validators.minLength(3)
        ] // <-- Validations
      ],
      duration: [
        0,
        [
          Validators.required,
          Validators.pattern('[0-9]+')
        ]
      ],
      description: [
        'Description',
        [Validators.required]
      ]
    });

    this.reactiveForm.valueChanges
      .filter( x => this.reactiveForm.valid)
      .map(value => new Video(value.title, value.duration, value.description))
      .do(formValue => console.log(formValue))
      .subscribe((video) => {
        this.video = video;
      })

class Video {
  constructor(
    private title: string,
    private duration: number,
    private description: string
  ){

  }
}

 

If you want to only update form data model when form is valid, you can do:

.filter( x => this.reactiveForm.valid)

 

Reactive form is very useful when you want to do some background task without block user in the ui.