1

我正在创建一个表单，FormBuilder并且我想将一个添加Validator到一个formGroup. 这是我的代码：

    this.myForm = fb.group({
        'name': ['', [Validators.maxLength(50), Validators.required]],
        'surname': ['', [Validators.maxLength(50), Validators.required]],
        'address': fb.group({
                'street': ['', Validators.maxLength(300)],
                'place': [''],
                'postalcode': ['']
        }),
        'phone': ['', [Validators.maxLength(25), phoneValidator]],
        'email': ['', emailValidator]
    });

我想在某些条件下有条件地将验证器添加到某些地址的 formControls 中。

所以我validator通过以下方式添加了一个：

        'address': fb.group({
                'street': ['', Validators.maxLength(300)],
                'place': [''],
                'postalcode': ['']
         }), { validator: fullAddressValidator })

然后我开始为地址创建一个验证器FormGroup：

export const fullAddressValidator = (control:FormGroup) => {
    var street:FormControl = control.controls.street;
    var place:FormControl = control.controls.place;
    var postalcode:FormControl = control.controls.postalcode;

    if (my conditions are ok) {
        return null;
    } else {
        return { valid: false };
    }
};

我需要添加以下条件：

  1. 如果所有字段为空，则表单有效
  2. 如果填写了其中一个字段，则必须填写所有字段
  3. 如果place是国家（而不是城市）的实例，postalcode 则为可选
  4. 如果postalcode已填写，则zipValidator必须将
    其添加到其 formControl

那么，可以在某些条件下将 Angular2 添加Validators到 a中吗？FormGroup如果是，如何执行我的条件？我可以在另一个验证器的源代码中使用setValidators()和吗？updateValueAndValidity()

4

2 回答 2

2

创建一个接受参数并返回验证器函数的函数

export const fullAddressValidator = (condition) => (control:FormGroup) => {
    var street:FormControl = control.controls.street;
    var place:FormControl = control.controls.place;
    var postalcode:FormControl = control.controls.postalcode;

    if (my conditions are ok) {
        return null;
    } else {
        return { valid: false };
    }
};

并像使用它一样

   'address': fb.group({
            'street': ['', Validators.maxLength(300)],
            'place': [''],
            'postalcode': ['']
     }), { validator: () => fullAddressValidator(condition) })
于 2016-11-21T12:42:57.303 回答
0

是的，可以在自定义验证器中设置FormControl验证器。FormGroup这是我需要的解决方案：

export const fullAddressValidator = (control:FormGroup):any => {
    var street:FormControl = control.controls.street;
    var place:FormControl = control.controls.place;
    var postalcode:FormControl = control.controls.postalcode;

    if (!street.value && !place.value && !postalcode.value) {
        street.setValidators(null);
        street.updateValueAndValidity({onlySelf: true});
        place.setValidators(null);
        place.updateValueAndValidity({onlySelf: true});
        postalcode.setValidators(null);
        postalcode.updateValueAndValidity({onlySelf: true});

        return null;
    } else {
        street.setValidators([Validators.required, Validators.maxLength(300)]);
        street.updateValueAndValidity({onlySelf: true});
        place.setValidators([Validators.required]);
        place.updateValueAndValidity({onlySelf: true});
        if (place.value instanceof Country) {
            postalcode.setValidators(Validators.maxLength(5));
            postalcode.updateValueAndValidity({onlySelf: true});
        } else {
            postalcode.setValidators([zipValidator()]);
            postalcode.updateValueAndValidity({onlySelf: true});
        }
    }

    if (street.invalid || place.invalid || postalcode.invalid) {
        return {valid: false};

    } else {
        return null;
    }
};
于 2016-11-21T16:23:00.767 回答