Angular2：最好的方式來使用FormBuilder Validators.required與複選框組

我正在用FormBuilder & ngFormModel構建Angular2的表單，並且無法找到驗證複選框組中的1個或多個複選框的優雅方式。我不想編寫一個自定義組件方法來驗證我使用它們的任何地方的複選框組。理想情況下，利用FormBuilder & Validator.ququired或甚至自定義驗證器來利用ngFormModel會很好。Angular2：最好的方式來使用FormBuilder Validators.required與複選框組

來源

2016-05-23 Nathan Taylor

您需要定義一組爲您的複選框，並指定一組驗證：

this.myForm = this.builder.group({ 
    'checkboxes': fb.group({ 
    checkbox1: [ '' ], 
    checkbox1: [ '' ] 
    }, {validator: this.checkboxRequired}) 
});

和驗證：

checkboxRequired(group: ControlGroup) { 
    var valid = false; 

    for (name in group.controls) { 
    var val = group.controls[name].value; 
    if (val) { 
     valid = true; 
     break; 
    } 
    } 

    if (valid) { 
    return null; 
    } 

    return { 
    checkboxRequired: true 
    }; 
}

您可以用表格這種方式鏈接此：

<form [ngFormModel]="myForm"> 
    Checkbox1: <input type="checkbox" 
    [ngFormControl]="myForm.controls.checkboxes.controls.checkbox1"/> 
    Checkbox2: <input type="checkbox" 
    [ngFormControl]="myForm.controls.checkboxes.controls.checkbox2"/> 
</form>

查看此問題以瞭解更多詳情：

Angular 2 form validating for repeat password

你可以提高驗證碼借力Validators.required：

checkboxRequired(group: ControlGroup) { 
    var valid = false; 

    for (name in group.controls) { 
    var check = Validators.required(group.controls[name]); 
    if (!check) { 
     valid = true; 
     break; 
    } 
    } 

    if (valid) { 
    return null; 
    } 

    return { 
    checkboxRequired: true 
    }; 
}

來源

2016-05-23 16:06:51

由於API已經略有改變。以下答案稍微刷新一下。這是有意的有點冗長

this.myForm = this._fb.group({ 
     myName: ['', [<any>Validators.required, <any>Validators.minLength(5)]], 
     role: new FormGroup({ 
      prog: new FormControl(null), 
      mgr: new FormControl(null), 
      designer: new FormControl(null), 
      }, this.CheckGroupValidation) 
    });

的驗證功能：

private CheckGroupValidation(group:FormGroup) 
 
{ 
 

 
    var valid = false; 
 
    var control_name:any; 
 

 

 
    for (control_name in group.controls) 
 
    { 
 
     var check = group.controls[control_name].value; 
 
     if (check) { valid = true; break; } 
 
    } 
 

 
    if (valid) { return null;} 
 
    return { CheckGroupValidation: true}; // not qualified 
 
}

模板文件

<form [formGroup]="myForm" novalidate (ngSubmit)="save()" > 
 

 
<ion-list> 
 

 
    <ion-item> 
 
     <ion-label>Username</ion-label> 
 
     <ion-input type="text" value="" formControlName="myName" ></ion-input> 
 
    </ion-item> 
 

 

 
</ion-list> 
 

 
<ion-list formGroupName="role"> 
 
    <ion-item> 
 
     <ion-label>Programmer</ion-label> 
 
     <ion-checkbox color="dark" checked="true" formControlName="prog" ></ion-checkbox> 
 
    </ion-item> 
 

 
    <ion-item> 
 
     <ion-label>Manager</ion-label> 
 
     <ion-checkbox color="dark" checked="false" formControlName="mgr"></ion-checkbox> 
 
    </ion-item> 
 

 
    <ion-item> 
 
     <ion-label>Designer</ion-label> 
 
     <ion-checkbox color="dark" checked="false" formControlName="designer"></ion-checkbox> 
 
    </ion-item> 
 

 
</ion-list> 
 

 
<button type="submit" 
 
     [disabled] = "!myForm.valid" 
 
     [hidden]= "isProcessing" 
 
     ion-button full style="margin-top:0px;" >Submit</button> 
 
</form>

來源

2017-06-13 18:39:58

Angular2：最好的方式來使用FormBuilder Validators.required與複選框組

回答

相關問題