Angular 8 Radio 真假答案

【问题标题】：Angular 8 Radio true falseAngular 8 Radio 真假
【发布时间】：2020-11-19 03:16:56
【问题描述】：

因为我使用了这个单选按钮，如下所示。

    <form [formGroup]="LocationModel.FormCommonGroup">
    <div class="form-group row m-b-10">
            <div class="col-2"></div>
            <div class="col-2 m-p-left">
              <div class="radio radio-css m-l-10">
                <input type="radio" name="radio_css" id="cssRadio1" [(checked)]="LocationModel.EIN" (change)="LocationModel.EIN = !LocationModel.EIN">
                <label for="cssRadio1" class="l_height">EIN</label>                      
              </div>                                                                     
            </div>                                                                       
            <div class="col">                                                            
              <div class="radio radio-css">                                              
                <input type="radio" name="radio_css" id="cssRadio2" [(checked)]="LocationModel.SSN" (change)="LocationModel.SSN = !LocationModel.SSN">
                <label for="cssRadio2" class="l_height">SSN</label>
              </div>
            </div>
          </div>
     <div class="form-group row m-b-10">
        <div class="col-md-4 offset-md-2">
          <input class="btn btn-sm btn-primary m-r-5" (click)="Add()" type=button value="Add Location" />
          <a [routerLink]="['/Locations']" class="btn btn-sm btn-default">Cancel</a>
        </div>
      </div>
    </form>

现在，当我尝试单击<input class="btn btn-sm btn-primary m-r-5" (click)="Add()" type=button value="Add Location" /> 的按钮时，如果单击一次，它会给我 EIN 或 SSN 的 true false，如果再次单击相反的内容，然后它在两边都给了我 true。以下是通过console.log() 提供的示例。

Location
EIN: true
SSN: true

因为我需要 true 和 false 如果在 EIN 或 SSN的对立面上多次点击任何人>.

【问题讨论】：

一般来说如果使用[(ngModel)]或者formControlName，你应该避免使用[checked]或者(change)。将value 分配给每个单选按钮并使用相同的formControlName

标签： angular typescript radio-button angular8

【解决方案1】：

试试这个方法可能会有帮助。
在 Html 文件中，将您的 [(checked)]="LocationModel.EIN" (change)="LocationModel.EIN = !LocationModel.EIN" 替换为 [(ngModel)]="EINSSN" value="EIN"，另一个也如下所示。

<div class="col-2 m-p-left">
          <div class="radio radio-css m-l-10">
            <input type="radio" name="radio_css" id="cssRadio1" [(ngModel)]="EINSSN" value="EIN" [ngModelOptions]="{standalone: true}">
            <label for="cssRadio1" class="l_height">EIN</label>
          </div>
        </div>
        <div class="col">
          <div class="radio radio-css">
            <input type="radio" name="radio_css" id="cssRadio2" [(ngModel)]="EINSSN" value="SSN" [ngModelOptions]="{standalone: true}">
            <label for="cssRadio2" class="l_height">SSN</label>
          </div>
        </div>

然后在你的 ts 文件类中添加这个EINSSN:any，点击Add() 函数后在你的添加函数中写下这样的内容。

this.LocationModel.EIN = this.EINSSN == "EIN" ? true : false;
this.LocationModel.SSN = this.EINSSN == "SSN" ? true : false;

【讨论】：

好的，我试试这个。