Question

Angular 2's documentation ile doğrulama, form doğrulaması hakkında bilgi verir. Ancak sadece giriş alanları için metin yazın. Sorum şu: Radyo Düğmeleri. İşte

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> 

Nasıl kullanıcı herhangi bir değer seçilmemiş ise true engelli özelliğini ayarlamak için.

Answer 1

Şablon odaklı formlarda, modelinizi yerel bir değişkene gösterebilir ve hata nesnesini sorgulayabilirsiniz.

<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

sen Forms hangi demedin yana Modülü (Reaktif veya Şablon tahrik) Burada kullanarak bir tepkisel formları sürümü edildi:

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> 

bileşen kodu

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

İşte Plunker var: http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx?p=preview

Answer 3

diğer cevaplar radyolar zaten bu nedenle myForm.valid çalışacak yapıyor ngForm parçası haline radyo öğelerinde yapılan değişkenleri eklemek için çalışıyoruz neden emin değilim.

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

Sadece f.valid yapmalıdır:

İşte benim.