Question

Angular 2's documentationは、フォームの検証について説明しています。しかし、入力フィールドのテキストのみを入力します。私の質問はラジオボタンです。ユーザーが任意の値を選択していない場合はtrueに無効なプロパティを設定する方法を

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

：ここ

はHTMLです。

Answer 1

テンプレート駆動型では、モデルをローカル変数に公開し、エラーオブジェクトをクエリできます。あなたがここに使用していた

<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

あなたはモジュール（駆動反応またはテンプレート）を形成する言わなかったので、反応性フォームのバージョンです：

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> 

部品コード

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

ここでPlunkerです：http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx?p=preview

Answer 3

他の回答は無線がすでにのでmyForm.validが働くだろうやってngFormの一部となるラジオ要素に変数を添付しようとしている理由はわかりません。

ここでは私のもの：

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

すればいいだけf.validが。