[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()

        ] // <-- Validations

      ],

      duration: [

        ,

        [

          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.

巴特西

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

最新文章

热门文章