Question

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

例如：

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

如果年份为＆lt; {p>如何在model上设置条件？ 1990？

我完全理解如何使用API来获取不在FormArray内的属性。

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

表单数组中的表单组可以使用验证程序键获取第二个对象参数，您可以在其中放置自定义验证程序。以下是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年，模型必须是“野马”才有效。如果有效变量为true（这意味着控制将有效）或者将返回值为true的对象键（这将使控件无效），则此方法返回null。希望这有帮助！

Angular 2表单阵列验证

1 个答案: