反应形式至少需要一个值

Question

我正在使用 ReactiveFormsModule 构建表单。

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

家phone号码
手机phone号码
电子邮件

表格应该是有效的，如果输入家庭或手机 phone 号码，这意味着 至少一个 是必需的。电子邮件是可选的。

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;
            }
    }

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

    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' 是 phone 数字之一

Answer 2

您可以更改表单的状态 and/or 在您创建的可观察对象中控制错误。

例如：

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});

反应形式至少需要一个值

At least one value required in reactive forms

angular2-forms

angular