Angular 4 - resetting a Reactive Form

Viewed 8261

Using Reactive Forms, I have created some controls

 ngOnInit() {
    this.myForm = new FormGroup({
      'name': new FormControl(null),
      'city': new FormControl('London'),
      'structure': new FormGroup({
        'Parallel': new FormControl('Parallel'),
        'Hierarchical': new FormControl('Hierarchical'),
        'Stable': new FormControl('Stable'),
      })
    })
}

'name' and 'city' are rendered as a text field (with city having a default value) and 'structure' is rendered as checkboxes (all of them checked).

Now, I need to provide an option to reset the form to default values. So, on click of Reset button, I am executing the following code

 onReset() {
   //Leaving out 'name', as it does not have a default value
    this.myForm.reset({
      'city': 'London',
      'structure': ?????, //What should I do here
    });     
}

form.reset resets the form. However, I also need to restore the default values. Restoring the default value of 'city' is easy since it's just a form control. However, how do I reset the values for 3 checkboxes inside 'structure' (which is a FormGroup)?

1 Answers
Related