Question

我正在使用ReactiveFormsModule构建表单。

我需要用户输入联系方式：

家庭电话号码
手机号码
电子邮件

表格应该有效，如果输入家庭或手机号码，则表示需要至少一个。电子邮件是可选的。

this.contact = this.fb.group({
    'Festnetz': [],
    'Mobil': [],
    'Email': [],
});

this.contact.valueChanges.subscribe(form => {
    console.log(form, this.contact.status);
});

如何使用FormBuilder声明？

Answer 1

您可以这样做：

        this.contact = this.fb.group({
        'Festnetz': [],
        'Mobil': [],
        'Email': [],
    },{validator:(formGroup:FormGroup)=>{
return this.validatePhone(formgroup);

    });

validatePhone(formgroup:FormGroup){
     if(formgroup.controls["Festnetz"].value || formgroup.controls["phone"].value){
            return {validatePhone:true};
            }
            else{
            return null;
            }
    }

或者您可以为您的电话号码创建一个单独的组：

    this.contact = this.fb.group({
    'phoneGroup':this.fb.group({
       'Festnetz': [],
            'Mobil': []
    },{validator:(formgroup:FormGroup)=>{
       return this.validatePhone(formGroup);

        }),
            'Email': [],
        });

validatePhone(formgroup:FormGroup){
 if(formgroup.controls["Festnetz"].value || formgroup.controls["phone"].value){
        return {validatePhone:true};
        }
        else{
        return null;
        }
}

注意：我假设'Festnetz'是电话号码之一

Answer 2

您可以在创建的可观察范围内更改表单的状态和/或控制错误。

例如：

this.contact = this.fb.group({
'Festnetz': [],
'Mobil': [],
'Email': [],
});

this.contact.setErrors({required: true});
this.contact.valueChanges.subscribe(newValue => {
    if(newValue.Festnetz.length > 0 || newValue.Mobil.length > 0){
        this.contact.setErrors(null);
    } else {
        this.contact.setErrors({required: true});
    } 
});

然后只需替换 length> 0 验证以满足您的目的，例如嵌套循环以确认长度> = 7或设置newValue.Festnetz.setErrors({minlength: true});

反应形式中至少需要一个值

2 个答案: