web-dev-qa-db-ja.com

Angular 2 ngModelによるラジオボタン検証

Angular 2のドキュメント は、フォームの検証について通知します。ただし、入力フィールドに対してのみテキストを入力します。私の質問はラジオボタンです。

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>

ユーザーが値を選択していない場合にdisabledプロパティをtrueに設定する方法。

validationangularangular2-forms
12
Malik Shahzad

テンプレート駆動型フォームを使用すると、モデルをローカル変数に公開し、エラーオブジェクトを照会できます。

<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; 
}
11
Bazinga

どのフォームモジュール（リアクティブまたはテンプレートドリブン）を使用しているかは言わなかったため、ここではリアクティブフォームバージョンを使用します。

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]
  });
}

ここにプランカーがあります： http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx?p=preview

8
silentsod

無線が既にngFormの一部になっているときに、他の回答が変数を無線要素に付加しようとしている理由がわからないため、myForm.valid動作します。

これが私のものです：

<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すべきです。

1
KhoPhi

Angular2を使用してmat-radio-groupを検証する

<form [formGroup]="answerTypeFormGroup">
    <ng-template matStepLabel>first name</ng-template>
        <mat-radio-group formControlName="answerTypeCtrl" required>
        <mat-radio-button value="option_1">Option 1</mat-radio-button>
        <mat-radio-button value="option_2">Option 2</mat-radio-button>
        <mat-radio-button value="option_3">Option 3</mat-radio-button>
    </mat-radio-group>
</form>
// if answerTypeFormGroup is not valid show some error
<div *ngIf="!answerTypeFormGroup.valid" >some error</div>
0
Amir Navid