Angular 2表单数组验证

Question

如何访问FormArray中项目的验证器？

例如：

{
    firstName: 'Joe',
    lastName: 'Dirt',
    cars: [
        { make: 'A', model: 'B', year: 1990 },
        { make: 'C', model: 'D', year: 1990 }
    ]
}

如果年份小于1990，您该如何在model上设置条件？

我完全了解如何使用API访问属性，但不知道如何在FormArray内部进行操作。

- Sam

Answer 1

这里是一个验证表单数组的简单示例。以下是 app.component.ts 文件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';
import { CustomValidator } from './custom-validators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [`./app.component.css`]
})
export class AppComponent implements OnInit {
  person: FormGroup;
  carsArray: FormArray;
  constructor(private fb: FormBuilder) { }
  ngOnInit() {
    this.person = this.fb.group({
      firstName: this.fb.control('Joe'),
      lastName: this.fb.control('Dirt'),
      cars: this.fb.array([
        this.fb.group({
          make: this.fb.control('a'),
          model: this.fb.control('b'),
          year: this.fb.control(1990)
        }, {
            validator: CustomValidator.checkYearModel()
          })
      ])
    });
    this.carsArray = this.person.get('cars') as FormArray;
  } // End Of Init
} // End of Class

表单数组中的表单组可以使用第二个对象参数，其键名为validator，您可以在其中放置自定义验证器。以下是 custom-validator.ts 的内容：

export class CustomValidator {
    static checkYearModel() {
        return (control) => {
            const year = control.value.year;
            const model = control.value.model;
            let valid: boolean;
            (year < 1990 && model !== 'mustang') ? valid = false : valid = true;
            return (valid) ? null : { checkYearModel: true };
        }; // End of return (control)=>
    } // End of method
} // End of Class

在这种情况下，我创建了变量，使其等于控件的年份和型号值(即您将验证放置在其中的表单组)。如果年份在1990年之前，那么模型必须是“野马”才能有效。如果valid变量为true(这意味着控件将是有效的)，则此方法返回null；否则，它将返回一个具有值为true的对象键(这将使控件无效)。希望这可以帮到您！

- Stephen McDonald