Angular2 Reactiveフォームラジオボタンのフォームコントロール

Question

ReactiveフォームでAngular2でフォームを作成しています。 FormBuilderを使用してフィールドのグループを作成しています。テキストボックスの場合、これは非常にうまく動作します。しかし、私はラジオボタンのformControlを見つけることができません。

これはどのように機能しますか？私はテキスト入力と同じように<input formControlName="gender" type="radio">を実行する必要がありますか？

Answer 1

テキスト入力の場合と同じように<input formControlName="gender" type="radio">としますか？

はい。

これはどのように機能しますか？

フォーム制御ディレクティブは、ControlValueAccessorディレクティブを使用してネイティブエレメントと通信します。可能な入力ごとに異なるタイプのControlValueAccessorsがあります。値アクセッサディレクティブのselectorによって正しいものが選択されます。セレクタはtypeの<input>に基づいています。 type="radio"がある場合、ラジオの値アクセサが使用されます。あなたのコンポーネントで

Answer 2

、フォームの一部としてあなたのラジオボタンを定義します。あなたのコンポーネントHTMLで

export class MyComponent { 
    form: FormGroup; 
    constructor(fb: FormBuilder){ 
    this.form = fb.group({ 
     gender: "" 
    }); 
    } 
} 

を、自分のフォームを作成：

<div class="form-group"> 
    <label>Please select your gender</label> 
    <div class="row"> 
    <label class="md-check"> 
     <input type="radio" value="female" name="gender" formControlName="gender"> 
     Female 
    </label> 

    <label class="md-check"> 
     <input type="radio" value="male" name="gender" formControlName="gender">  
     Male 
    </label> 
    </div> 
</div> 

私はあなたがどのように知っていると仮定ここには表示されない送信ボタンを使用してフォーム全体を構築します。

フォームが送信されると、あなたはここで、ラジオボタンの値を取得できます。

let genderValue = this.form.value.gender; 

これは「女性」またはラジオボタンがチェックされている依存した上で、「男性」のどちらかになります。

希望すると、これが役立ちます。がんばろう！

Answer 3

反応性のあるフォームを追加するには小さいものが1つあります。値は文句を言わない、選択され、それがラジオボタンを文字列に変更するか、そうでなければする必要が整数の場合...

this.jobForm = this._fb.group({ 
        id: [res["job"]["id"]], 
        job_status: [res["job"]["job_status"]**["id"].toString()**,Validators.required], 
        title: [res["job"]["title"],Validators.required] 
       }); 

Answer 4

Angular Material controls（主に）今使用するのに十分成熟しています。

サンプルは主にngModelを使用しますが、ここではformControlNameを使用する方法があります。

<mat-radio-group formControlName="colorFilter" fxLayout="column" fxLayoutGap=".25rem"> 
    <mat-radio-button [value]="'Blue'">Blue things</mat-radio-button> 
    <mat-radio-button [value]="'Red'">Red things</mat-radio-button> 
    <mat-radio-button [value]="'Orange'">Orange things</mat-radio-button> 
</mat-radio-group> 

私は縦の列に私のボタンを配置するangular/flex-layoutを使用しています。

（も行っている可能性定数のvalue='Blue'または[value]="blueColorName"は、モデルのプロパティを参照します。

を、私はそれはあなたが「truthy」の値は、それほど気をつけていないため0に問題がある可能性がありと信じて列挙型にバインドする（もはや問題にならないかもしれない）。