Angular2反应形式单选按钮形式控制

我正在用反应形式在Angular2中构建表单。我使用FormBuilder来创建一组字段。对于文本框，这非常有效。但我找不到单选按钮的formControl。Angular2反应形式单选按钮形式控制

这是如何工作的？我应该怎么做<input formControlName="gender" type="radio">就像我对文本输入的做法一样？

2016-10-10 Mike Bovenlander

我应该怎么做<input formControlName="gender" type="radio">就像我对文本输入做的那样？

是的。

这是如何工作的？

表单控制指令使用ControlValueAccessor指令与本地元素进行通信。每种可能的输入都有不同的ControlValueAccessors类型。正确的是由accessor指令的selector选择的。选择器基于什么type<input>是。如果有type="radio"，则将使用无线电的值存取器。

来源

2016-10-10 11:57:10

我试过，但我想我犯了一个错误之前..谢谢！ –

那么你现在工作吗？ –

是的，我做了，它现在就像一个魅力！ :) –

在你的组件，定义你的单选按钮表单的一部分：

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

在组件的HTML，构建你的表格：

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

这要么是“女性”或“男性”，这取决于单选按钮被选中。

希望这可以帮助你。祝你好运！

来源

2016-10-10 15:47:05 Chang

我认为有必要指出，名称和formControlName必须与代码中的相同，适用于这两种无线电。一些可能会错过的微妙点。 – rmcsharry

其他2个有用的观点 - （1）如果你愿意，你仍然可以包含（改变）事件，尽管你会订阅改变，所以不知道这是否合理。（2）和你的代码一样，你不能象使用[（ngModel）]那样绑定值，所以请记住当@Chang在这里显示的时候删除[]的值。 – rmcsharry

name属性是可选的！ – Pascal

一个小增加了我注意到的Reactive形式。如果该值是一个整数，它需要以改变串否则单选按钮不会被选择..

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

来源

2016-12-21 07:57:03 Cliff

您可以通过使用[]像这样** [value] =“0”**而不是** value =“0”**来设置输入值来绕过这个问题。 – JayChase

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"指一个模型属性。

我相信有可能是0一个问题，因为它不是一个“truthy的价值，所以如果你”当心重新绑定枚举（可能不再是问题）。

来源

2018-01-17 20:37:58

Angular2反应形式单选按钮形式控制

回答

相关问题