typescript 输入无线电中的ngModel？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52612083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ngModel in input radio?
提问by claudioz
I'm developing an application using Angular 6. I have a big problem.
Using a template-driven formI would like that the item selected in a radio button can be sent when I press the submit button.
It's all right when I work with <input type="text" [(ngModel)] = "value" />(valueis a data field of my component), but if I try with this:
我正在使用 Angular 6 开发应用程序。我遇到了一个大问题。使用模板驱动的表单，我希望可以在按下提交按钮时发送在单选按钮中选择的项目。当我使用<input type="text" [(ngModel)] = "value" />(value是我组件的数据字段) 时没问题，但是如果我尝试这样做：
<div class="form-group">
<div *ngFor = "let option of options">
<div class="radio">
<input type = "radio"
name = "radio"
[(ngModel)] = "value"
/>
<label for="{{option.id}}">{{option.id}}</div>
</label>
</div>
</div>
</div>
The result is a bug! I can't even click the multiple buttons by moving the selector! Everything is stuck! Obviously it does not work with the form.
If I remove [(ngModel)] = "value"graphically it works, but without ngModel directive if I enter this code inside a template-driven form that uses (ngSubmit) it does not work.
Thanks a lot.
结果是bug！我什至无法通过移动选择器来单击多个按钮！一切都被卡住了！显然它不适用于表单。如果我以[(ngModel)] = "value"图形方式删除它可以工作，但没有 ngModel 指令，如果我在使用 (ngSubmit) 的模板驱动表单中输入此代码，则它不起作用。非常感谢。
回答by Tommy
Radio buttons work different. To need to add a valueto make it work. If you want to assign a value from angular use [value].
单选按钮的工作方式不同。需要添加一个value才能使其工作。如果要从 angular 分配值，请使用[value].
I have make it running in an example of stackblitz:
我已经让它在stackblitz 的一个例子中运行：
<div class="form-group">
<div *ngFor="let option of options; let i=index">
<div class="radio">
<input type="radio" id="{{option.id}}" name="radio{{i}}" [(ngModel)]="option.value" [value]="option.id" />
<label for="{{option.id}}">{{option.id}}</label>
</div>
</div>
</div>
<hr>
<h2>Values for options</h2>
<ul>
<ng-container *ngFor="let option of options; let i=index">
<li *ngIf="option.value !== ''">Value for {{option.id}}: {{option.value}}</li>
</ng-container>
</ul>
Component
零件
value: any;
options = [
{
id: "test1",
value: ''
},
{
id: "test2",
value: ''
},
{
id: "test3",
value: ''
}];
Extension/Hints:
扩展/提示：
You can even use [(ngModel)] = "value"to assign the last selected value to value.
您甚至可以使用[(ngModel)] = "value"将最后选择的值分配给value。
Give these radio buttons the same name name="radio"to ensure that only one of this group can be selected.
为这些单选按钮指定相同的名称name="radio"以确保只能选择该组中的一个。
回答by Teddy Sterne
You are missing a value for each of the radio buttons so the binding does not work correctly. It is unable to determine which input should be checked so none of them get checked. Update the template to be something like:
您缺少每个单选按钮的值，因此绑定无法正常工作。它无法确定应该检查哪个输入，因此它们都没有被检查。将模板更新为如下所示：
<div *ngFor="let option of options">
<div class="radio">
<input type="radio"
name="radio"
id="radio-{{option.id}}"
[(ngModel)]="value"
[value]="option.value"
/>
<label for="radio-{{option.id}}">{{option.id}}
</label>
</div>
Stackblitz Demo
Stackblitz 演示
回答by Kanish Mathew
Inside the ts file :
在 ts 文件中：
radio_button_value = null;
box_options = [
{
"name": "Word",
"value": "word",
},
{
"name": "Line",
"value": "line"
},
]
Inside the html file:
在 html 文件中：
Do notice of the tag 'name', it would we a great concern inside another for loop.
请注意标签“名称”，这将是我们在另一个 for 循环中非常关心的问题。
<div *ngFor="let box_opt of box_options; let i=index">
<input name="option-{{i}}" type="radio" [value]="box_opt.value" [(ngModel)]="radio_button_value">
{{box_opt.name}}
<br>
</div>
