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、次の方法でa を追加しました。

        '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. フィールドの 1 つが入力されている場合は、すべてのフィールドが必須である必要があります
  3. place(都市ではなく) 国のインスタンスである場合、postalcode はオプションです
  4. postalcodeが入力されている場合は、 その formControl に追加するzipValidator必要があります

では、Angular2ValidatorsをFormGroup特定の条件で追加することは可能ですか? もしそうなら、私の条件を実装する方法は？別のバリデーターのソースコードでsetValidators()andを使用できますか?updateValueAndValidity()

4

2 に答える 2

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 に答える