[Angular2 Form] patchValue, setValue and reset() for Form

Learn how to update part of form model, full form model and reset whole form.

 

We have form definetion like this:

reactiveForm: FormGroup;

constructor(fb: FormBuilder) {

    this.extra = new FormControl('...', [
      Validators.maxLength(100)
    ]);

    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]+'),
          validateDuration
        ]
      ],
      extra: this.extra,
      description: [
        'Description',
        [Validators.required]
      ]
    });

 

  partialUpdate(){
    this.reactiveForm.patchValue({
      title: 'updatedTitle'
    })
  }

  fullUpdate(){
    this.reactiveForm.setValue({
      title: "Full updated title",
      description: "Full updated description",
      duration: 0,
      extra: "Extra"
    })
  }

  reset(){
    this.reactiveForm.reset();
  }