Manipulating form data

The FormGroup class contains two methods that we can use to change the values of a form programmatically:

• setValue: Replaces values in all the controls of the form
• patchValue: Updates values in specific controls of the form

The setValue method accepts an object as a parameter that contains key-value pairs for all the controls of the form. Let's add a button to our heroDetails form that creates a new hero in order to illustrate the usage of setValue:

1. Open the hero.component.html file and add a button element named Add hero before the button that adds powers.
2. Bind the click event of the Add hero button to a component method named addHero:

   <button (click)="addHero()">Add hero</button>

3. Open the hero.component.ts file and add the addHero method, which uses the setValue method to fill in the form with details of a new hero:

   addHero() {
     this.heroDetails.setValue({
      ...