angular - 我们如何设置 Angular 2中单选按钮的默认值

Question

我有一个模型驱动的表单，想要显示基于 radio 输入的字段。代码:-

       <div class="form-group">
          <md-radio-group class="form-control"  id="radio1" formControlName="selection">
            <md-radio-button  [value]="A" >A</md-radio-button>
            <md-radio-button  [value]="B">B</md-radio-button>
          </md-radio-group>
        </div>

        <div class="form-group" *ngIf="selection.value=='A'">
          <md-input-container>
              <textarea md-input placeholder="A" class="form-control"
                        formControlName="A"
                        style="border:none;"></textarea>
          </md-input-container>
        </div>
        <div class="form-group" *ngIf="selection.value=='B'">
          <md-input-container>
            <input md-input placeholder="B" class="form-control"
                   formControlName="B"
                   style="border:none;">
          </md-input-container>            
        </div>

收到错误“无法读取未定义的属性‘值’”由于未选择任何 radio 。

如何指定选择第一个作为默认值。

Answer 1

您需要传递一个字符串作为 radio 的值。现在 Angular 尝试查找名为 A 的变量。

<md-radio-group class="form-control" [(ngModel)]="selection.value" 
                id="radio1" formControlName="selection">
  <md-radio-button [value]="'A'">A</md-radio-button>
  <md-radio-button [value]="'B'">B</md-radio-button>
</md-radio-group>

在为相应组件中的 selection.value 分配值时初始化 radio :

class MyRadioComponent {
  selection = {"value":"A"};
}