在单选按钮组内输入文本字段

Question

有没有办法将ngModel 绑定到radio group 内的input 文本字段？我有一个多选单选按钮组，最后一个选项为other（带有输入文本）。这是我目前所拥有的：

 <mat-radio-group fxLayout="column" name="goal_name" [(ngModel)]="goal.name">
          <mat-radio-button *ngFor="let gn of goalNames" name="goal_name" [value]="gn">{{gn}}</mat-radio-button>
          <mat-radio-button value="" name="goal_name">
            <mat-form-field>
              <input matInput placeholder="Other" [(ngModel)]="goal.name" name="something">
            </mat-form-field>
          </mat-radio-button>
        </mat-radio-group>

goalNames = ["buy", "travel", "save",
    "build", "retire"];

这个实现的问题是ngmodel 的值没有将自己绑定到单选按钮的值。这就是为什么每次输入文本更改时收音机都会取消选中。有没有办法实现这个要求？

Answer 1

This stackblitz 展示了一种方法。使用了两个属性：goalOption 绑定到选定的单选按钮值，customGoalName 绑定到输入文本。当两者中的任何一个发生变化时，goal.name 会通过在属性设置器中调用 updateGoalName 来更新。

private _goalOption: string = "";
private _customGoalName: string = "";

goal = { name: "" };

goalNames = ["buy", "travel", "save", "build", "retire"];

get goalOption(): string {
  return this._goalOption;
}
set goalOption(value: string) {
  this._goalOption = value;
  this.updateGoalName();
}

get customGoalName(): string {
  return this._customGoalName;
}
set customGoalName(value: string) {
  this._customGoalName = value;
  this.updateGoalName();
}

private updateGoalName(): void {
  this.goal.name = this._goalOption === "other" ? this._customGoalName : this._goalOption;
}

自定义目标名称的单选按钮在模板中具有值 other。输入事件 ngModelChange 的处理程序确保在用户键入自定义目标名称时选中 other 单选按钮。

<mat-radio-group fxLayout="column" name="goal_name" [(ngModel)]="goalOption">
  <mat-radio-button *ngFor="let gn of goalNames" name="goal_name" [value]="gn">{{gn}}</mat-radio-button>
  <mat-radio-button value="other" name="goal_name">
    <mat-form-field>
      <input matInput placeholder="Other" [(ngModel)]="customGoalName" (ngModelChange)="goalOption = 'other'" name="something">
    </mat-form-field>
  </mat-radio-button>
</mat-radio-group>