Question

Angular 2's documentation cho biết xác thực biểu mẫu. Nhưng chỉ cho các trường nhập văn bản. Câu hỏi của tôi là dành cho Radio Buttons.

Đây là HTML:

<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male 
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female 
<button type='button' [disabled]="??">Next<button> 

Làm thế nào để thiết lập thuộc tính tàn tật là true nếu người dùng đã không được chọn bất kỳ giá trị.

Answer 1

Với biểu mẫu được định hướng mẫu, bạn có thể hiển thị mô hình của mình thành biến cục bộ và truy vấn đối tượng lỗi.

<form #f="ngForm"> 
    <input type="radio" value="male" name="gender" [(ngModel)]="gender" required #genderControl="ngModel"> Male 
    <input type="radio" value="female" name="gender" [(ngModel)]="gender" required> Female 
    <button [disabled]="genderControl.errors">Next</button> 
</form> 


export class App { 
    gender = null; 
} 

Answer 2

Vì bạn không nói mà Forms Module (Phản ứng hay Template driven) bạn đang sử dụng đây là một hình thức phiên bản phản ứng:

html

<form [formGroup]="radioTest"> 
    <input type="radio" name="gender" value='Male' formControlName="gender" [(ngModel)]='gender'>Male 
    <input type="radio" name='gender' value='Female' formControlName="gender" [(ngModel)]='gender'>Female 
    <button type="button" [disabled]="radioTest.controls['gender'].invalid">Gender Button</button> 
</form> 

thành phần đang

radioTest: FormGroup; 
gender; 
constructor(fb: FormBuilder) { 
    this.name = 'Angular2' 
    this.radioTest = fb.group({ 
    gender: ['', Validators.required] 
    }); 
} 

Đây là một Plunker: http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx?p=preview

Answer 3

Không chắc chắn tại sao các câu trả lời khác đang cố gắn biến vào các phần tử radio, khi radio đã trở thành một phần của ngForm do đó thực hiện myForm.valid.

Dưới đây là tôi:

<form #f="ngForm"> 
    <input type="radio" value="male" name="gender" [(ngModel)]="gender" required> Male 
    <input type="radio" value="female" name="gender" [(ngModel)]="gender" required> Female 
    <button [disabled]="f.valid">Next</button> 
</form> 

Chỉ cần một f.valid nên làm.