Reactive Form Management在Angular

這是表單數(shù)組的完美用例。下面的驗(yàn)證只是一個(gè)例子。

  get products(): FormArray {
    return this.fooForm.get('products') as FormArray;
  }

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.fooForm = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      company: ['', [Validators.required, Validators.maxLength(50)]],     
      email: ['', [Validators.required, Validators.email]],
      address: '',
      products: this.fb.array([this.buildProduct()])
    });
  }

  buildProduct(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      serialNumber: ['', Validators.required],
    });
  }

然后像這樣移除：

  removeProduct(index: number): void {
    this.products.removeAt(index);
  }

添加如下產(chǎn)品：

  addProduct(): void {
    this.products.push(this.buildProduct());
  }