ngForm Angular2 中的单选按钮

阿基莱什·波图里

我的 HTML 页面上有两个单选按钮用于性别选择(M 或 F)。如何检索在我的打字稿文件中单击了哪个按钮?这是代码

<form>
  <label> Gender </label>
  <br>
  <input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
  <br>
  <input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
  <br>

  <button id="signup" class="btn btn-primary" type="submit">Signup</button>
</form>

单击按钮时,我想将 M 或 F 分配给打字稿文件中的字符串。

梅亚潘苏布拉马尼扬

你的代码是正确的。不需要改变任何东西。

这是您的模板代码。

<form (ngSubmit)="onSubmit()">
    <label>Gender</label>
    <input type="radio"  required name='gender' value='Male' [(ngModel)]='gender'>Male
    <input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
     <button id="signup" type="submit">Signup</button>
</form>

在您的 .ts 文件中,

export class TestComponent implements OnInit {

     gender: string = "Male";

     onSubmit() {
           console.log(gender); 
     }
}

这将为您提供选定的性别值。因为你已经使用了双向绑定。每当输入更改时,它都会更新 ngModel。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

有没有办法在Angular2中将ngForm用于div元素

Angular2 ngForm不起作用

组件中的Angular 2模板驱动表单访问ngForm

在Angular2表单中使用NgForm和NgControlGroup

Angular2 +单选按钮不可单击

value属性未出现在Angular ngForm中

关于Angular模板驱动形式中的ngForm和ngModel的概念

带有数字数组的 ngForm 中的 Angular ngModel

带选择框的Angular 6中的ngForm简单示例

如何在Angular2 +中单击重置按钮上的单选按钮重置?

ngForm 无效时禁用按钮

Angular2,Typescript:在每页显示一个元素的数组中,如何选中单选按钮?

使用打字稿根据angular2中的文本框值禁用单选按钮

如何正确地将数据绑定到Angular2中的单选按钮?

无法在 Angular2 中的一组单选按钮上使用 [formControl]

如何绑定到angular2 beta 6中的单选按钮

无法将带有formcontrol的单选按钮与angular2中的反应形式绑定

Angular2-form:是否可以将子输入包含到父 NgForm 值更改中?

在Angular 2中将NgForm导出到局部动态变量

Angular - useExisting ngForm 可選

从Angular指令获取NgForm实例

Angular2 - 单选按钮的数据驱动方法

使用* ngFor [Angular2]创建多个单选按钮

angular2将模型值绑定到单选按钮

Angular2反应形式formControl单选按钮

在 angular cli 中检查单选按钮组

Angular2错误:没有将“ exportAs”设置为“ ngForm”的指令

Angular2问题:没有将“ exportAs”设置为“ ngForm”的指令

在Angular 2 App中清除md-单选按钮选择