如何在複選框組中添加必需的字段驗證？

我有4個複選框，其中至少有一個應該由用戶選擇。由於我是Angular 2的新手，所以有人可以幫我解決這個問題嗎？如何在複選框組中添加必需的字段驗證？

更新的代碼片斷：

HTML

<b><label *ngFor="let type of topics;let i=index" class="checkbox-inline"> 
        <input type="checkbox" id="{{'chkPhysician'+i}}" name="chekType" 
         formControlName="types" [value]="type.value" /> 
        {{type.display}} 
        </label>

component.ts

public topics = [ 
{ value: 'test1', display: 'test1',selected:true }, 
{ value: 'test2', display: 'test2',selected:true }, 
{ value: 'test3', display: 'test3',selected:true }, 
{ value: 'test4', display: 'test4',selected:true },

];

constructor(private fb: FormBuilder) { } 
ngOnInit(): void { 
    this.mirForm = this.fb.group({ 
     date: [this.date, Validators.required], 
     Name: ['', [Validators.required, Validators.minLength(4)]], 
     Mobile: ['', [Validators.required, Validators.minLength(10)]], 
     Email: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9._%+-][email protected][a-zA-Z0-9.-]+')]], 
     types:'', etc..............

來源

2017-05-30 Kirubakaran

Kiruba你好，請加你到目前爲止的代碼，以便其他用戶對您所上 –

@ amura.cxg我已經添加了示例代碼的工作是什麼一些背景。 – Kirubakaran

使用change事件

<div> 
    Pick your favorite hero 
    (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>) 
</div>

或者你可以嘗試使用CheckboxRequiredValidator。

來源

2017-05-30 14:57:52 AngJobs

你有幾個問題...如果你想有多個複選框選中的能力，你需要實際上有一個表單數組，而不是一個表單控件。

然後我會檢查至少一個複選框是由自定義驗證器檢查。所以形式的構建應該像這樣（縮短）：

this.mirForm = this.fb.group({ 
    types: this.fb.array([]) 
}, {validator:this.checkIfChecked});

那麼你將有你的複選框，並與我們期待的點擊事件，看看是否複選框被選中或取消選中。基於這些，我們可以將表單控件添加到表單數組中或刪除表單控件。

<input type="checkbox" 
     (click)="addRemoveToArr(type.value, $event.target.checked)" 
     id="{{'chkPhysician'+i}}" 
     name="chekType" 
     [value]="type.value" 
/>

和功能：

addRemoveToArr(type:string,isChecked:boolean) { 
    const types = <FormArray>this.myForm.get('types') 
    if (isChecked){ 
    types.push(new FormControl(type)) 
    } 
    else { 
    let index = types.controls.findIndex(x => x.value == type) 
    types.removeAt(index) 
    } 
}

終於自定義驗證返回null如果有至少一個複選框選中，否則返回notValid錯誤。

checkIfChecked = (control: AbstractControl) => { 
    if(control.controls.types.length == 0) { 
    return {notValid:true} 
    } else { 
    return null; 
    }  
};

來源

2017-05-30 19:40:14 Alex

非常感謝您的回覆。我在checkIfChecked中遇到問題獲取低於error.file：嚴重程度：'錯誤' 消息：''屬性'控件'在類型'AbstractControl'上不存在'。 at：'79，21' 來源：'ts' – Kirubakaran

您是否可以在plunker中重現此問題，因爲此代碼適用於我：http://plnkr.co/edit/IOD3LUMWR7Wlb4uvv4Zp?p=preview :) – Alex

它現在工作在代碼上稍有改變。然而原始/感動/骯髒不適用於複選框。你能幫我解決這個問題嗎？ – Kirubakaran

如何在複選框組中添加必需的字段驗證？

回答

相關問題