Question

我需要[(ngModel)]="salutation" #salutation="ngModel"进行验证，这样做会阻止我的单选按钮被选中
compareOptions（）返回true
使用版本angular4.1.2

    <app-validation-message [validation-control]="salutation">
          <app-styled-input [title]="'Male'" >
            <div  class="custom-radio" >
              <input id="female" name="salutation" type="radio" [value]="options[0].id"  [checked]="this.compareOptions(options[0]))"
                    [required]="required" [(ngModel)]="salutation" #salutation="ngModel">
              <label for="female"><span></span>{{options[0]['title']}}</label>
            </div>
            <div  class="custom-radio margin-left-10" >
              <input id="male" name="salutation" type="radio" [value]="options[1]"
                     [checked]="this.compareOptions(options[1])"
                    [required]="required" [(ngModel)]="salutation" #salutation="ngModel">
              <label for="female"><span></span>{{options[1]['title']}}</label>
            </div>

          </app-styled-input>
        </app-validation-message>

组件：

    compareOptions(obj:any){     
         return obj.id===this.personalData.salutation.id;
       }

Answer 1

尝试将[attr.checked]="true"添加到您的单选按钮，它对我来说非常适合。

Answer 2

我建议您迭代options而不是长手写模板。正如我在评论中提到的那样，避免在模板中调用方法，每次Angular运行变更检测时都会执行它们，这可能经常发生。所以我们想要做的是将初始值设置为ngModel，即salutation：

ngOnInit() {
  this.salutation = this.personalData.salutation.id;
}

现在我们也可以摆脱模板中的[checked]属性，因为我们正在使用ngModel。因此，您将模板修改为以下内容：

<div *ngFor="let opt of options">{{opt.title}}
  <input type="radio" [(ngModel)]="salutation" name="option" 
         #option="ngModel" [value]="opt.id" />
</div>

演示：http://plnkr.co/edit/1vAlRdhVSMPH12VEg5Fj?p=preview

在预取单选按钮不会被检查

2 个答案: