markdown Angular：ReactiveForm - 使用数组

Posted 2021-05-05

See working example at [stackblitz](https://stackblitz.com/edit/angular-gazukr) and full [tutorial](https://blog.karmacomputing.co.uk/angular-6-dynamically-add-rows-reactive-forms-how-to/).

## Module
Import `ReactiveFormsModule` to a shared module.
``` typescript
\!h import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
\!h  imports:      [ BrowserModule, FormsModule, ReactiveFormsModule ],
  declarations: [ AppComponent, HelloComponent, ProductFormComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
```

## Component
- Import `FormBuilder`, `FormGroup`, `FormArray`, `FormControl` to the component.
- Add `FormBuilder` in the `constructor`.
- 
``` typescript
\!h import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  constructor(
\!h   private fb: FormBuilder
  ) { }

  productForm: FormGroup;
}
```

- Initialize `FormBuilder` creating the `FormGroup` structure.
``` typescrypt
  ngOnInit() {
    // Initiate the form structure
    this.productForm = this.fb.group({
      title: [],
      selling_points: this.fb.array([
          this.fb.group({
            point:''
          })
        ])
    });
  }
```

- Methods to be called from the template
``` typescrypt
  get sellingPoints() {
    return this.productForm.get('selling_points') as FormArray;
  }

  addSellingPoint() {
    this.sellingPoints.push(this.fb.group({point:''}));
  }

  deleteSellingPoint(index) {
    this.sellingPoints.removeAt(index);
  }
```

## Template

``` html
<h1>Edit Product</h1>

\!h <form [formGroup]="productForm">

  <label>
\!h   Title: <input formControlName="title" />
  </label>

  <h2>Selling Points</h2>
\!h <div formArrayName="selling_points">
    <div 
\!h      *ngFor="let item of sellingPoints.controls; let pointIndex=index"
      [formGroupName]="pointIndex">
      <label>
\!h      Selling Point: <input formControlName="point" />
      </label>
\!h     <button type="button" (click)="deleteSellingPoint(pointIndex)">
        Delete Selling Point
      </button>
    </div>
    <br />
\!h    <button type="button" (click)="addSellingPoint()">
      Add Seeling Points
    </button>
  </div>
  
</form>

<p>
  {{ this.productForm.value | json }}
</p>
```