Angular 2表单阵列验证

2023年1月5日 224次阅读

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

例如：

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

如果年份如此,您将如何设定模型的条件？ 1990年？

我完全理解如何使用API​​来获取不在FormArray中的属性.

最佳答案 这是一个如何验证表单数组的简单示例.以下是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.希望这有帮助！

点赞