Question

我的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。

Answer 1

您可以通过添加ngModelChange方法来检索单击的按钮

<label> Gender </label>
<br>
<input type="radio"  required name='gender' value='Male' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Female
<br>
   </div>
            <button id="signup" class="btn btn-primary" type="submit" >Signup</button> </form>

在您的ts文件中

youMethodName(model) {
   console.log("TCL: youMethodName -> model", model)
}

Answer 2

您的代码是正确的。无需更改任何内容。

这是您的模板代码。

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

Answer 3

尽管，答案已经被接受。如果您不想使用双向数据绑定，我想提供此问题的解决方案。这种方式对于打破双向数据绑定很有用。因此，不需要用于[（ngModel）] 。在StackBlitz Link

中找到完整的工作演示

您的HTML ...

<form>
    <fieldset id="group1">
         <input type="radio" (change)="handleChange($event)" name="group1" value="Male"/>Male
         <input type="radio" (change)="handleChange($event)" name="group1" value ="Female"/> Female 
    </fieldset>

    <div *ngIf="_prevSelected"> {{ _prevSelected}} </div>

    <button (click)="click()">Show</button>
    <div *ngIf="clicked"> <span> selected value is {{_prevSelected}} </span></div>
</form>

您的班级文件是..

 private _prevSelected: any;
 clicked:boolean;

 handleChange(evt) {
   let target = evt.target;

   if (target.checked) this._prevSelected = target.value;
}
click(){
   this.clicked =true;
}

ngForm Angular2中的单选按钮

3 个答案: