将 [(ngModel)] 添加到单选按钮组后，默认的 [checked] 不再起作用

Posted 2023-03-13

【中文标题】将 [(ngModel)] 添加到单选按钮组后，默认的 [checked] 不再起作用

【英文标题】：After adding [(ngModel)] to a radio button group, the default [checked] no longer works

【发布时间】：2017-07-15 14:18:33

【问题描述】：

我正在开发一个可重用的小型组件，它可以设置单选按钮的样式并发出选定的值。

import  Component, OnInit, Input, Output, EventEmitter  from "@angular/core";

@Component(
    moduleId: module.id,
    selector: 'button-select',
    template: `<div class="toggle-group">
                    <div *ngFor="let choice of choices">
                        <input type="radio"
                               id=" groupName + choice "
                               name="groupName"
                               value=" choice "
                               [checked]="choice === defaultChoice"
                               [(ngModel)]="value"
                               (ngModelChange)="choose($event)" />
                        <label class="toggle-button"
                               for=" groupName + choice "> choice </label>
                    </div>
                </div>`,
    styleUrls: [
        'editableField.css',
        'buttonSelect.css'
    ]
)

export class ButtonSelectComponent implements OnInit 
    @Input() choices: string[];
    @Input() defaultChoice: string;
    @Input() groupName: string;
    @Input() value: string;

    @Output() valueChosen: EventEmitter<any> = new EventEmitter();

    ngOnInit() 
        this.choose(this.defaultChoice);
    

    private choose(value: string) 
        this.valueChosen.emit(value);
    

组件是这样实现的：

<button-select #statusFilter
               [choices]="['All', 'Active', 'Draft']"
               [defaultChoice]="'All'"
               [groupName]="'statusFilter'"
               (valueChosen)="filterChosen('statusFilter', $event)"
</button-select>

在添加[(ngModel)]="value" (ngModelChange)="choose($event)"到按钮选择组件之前，[checked]="choice === defaultChoice"指令正确设置了相关<input />上的checked属性。

之后添加[(ngModel)]，仅 ng-reflect-checked="true" 被设置，这会阻止视觉样式显示默认值（因为我的 CSS 使用伪选择器)。

将[(ngModel)] 更改为[ngModel] 无效。

为什么会发生这种情况，我该如何解决？

【问题讨论】：

请注意您使用的名称属性：name="groupName" 不会封装您的无线电组。一旦您选择任何单选组，您就可以使用箭头键导航到同一页面上另一个单选组中的另一个单选按钮。原因是 Angular 不会自己添加 name 属性，而是添加 ng-reflect-name。

【参考方案1】：

通过将输入的模板更改为：

<input type="radio"
       id=" groupName + choice "
       name="groupName"
       value=" choice "
       [checked]="choice === defaultChoice"
       (click)="choose($event['target']['value'])" />

...我觉得有点 hacky。它也没有解释为什么添加数据/属性绑定会破坏它，所以我愿意接受更多建议。

【讨论】：

使用单击来处理单选按钮是一个非常糟糕的建议。至少因为单击不是切换单选按钮的唯一方法。也可以用键盘来完成。如果您出于某种原因不想要ngModel，最好使用“更改”事件。

【参考方案2】：

我想，你不需要这个[checked]="choice === defaultChoice"。试试这个：

<input type="radio"
       id=" groupName + choice "
       name="groupName"
       [value]="choice"
       [(ngModel)]="defaultChoice"
       (ngModelChange)="choose($event)" />

当[value] = [(ngModel)] 选择收音机时。

【讨论】：

这完全正确！我很早就添加了[checked]，然后才考虑添加[(ngModel)]，并且从未质疑过。谢谢。

【参考方案3】：

export class ConfirmationmodalComponent implements OnInit 
  client_notification: any = false;
  candidate_notification: any = false;
  cancel_associated_session: any = false;

  constructor(
  ) 

  ngOnInit(): void 
  

<div class="form-check form-check-inline">
  <input
    class="form-check-input"
    type="radio"
    id="inlineRadio1"
    name="cancel_associated_session"
    [(ngModel)]="cancel_associated_session"
    [value]="true"
  />
  <label class="form-check-label" for="inlineRadio1">
    Yes
  </label>
</div>
<div class="form-check form-check-inline">
  <input
    class="form-check-input"
    type="radio"
    id="inlineRadio2"
    name="cancel_associated_session"
    [(ngModel)]="cancel_associated_session"
    [value]="false"
  />
  <label class="form-check-label" for="inlineRadio2">
    No
  </label>
</div>