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.