如何设置角度2中的单选按钮的默认值

问题描述：

我有一个模型驱动的窗体，并希望显示基于无线电输入的字段。代码： -如何设置角度2中的单选按钮的默认值

 <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>

获取误差由于没有选择电台“不能未定义读取属性‘值’” 。

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

答

您需要通过一个string作为收音机的值。现在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您初始化电台：

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

感谢马特，但是我怎么说，选择一个默认的页面加载时。有没有财产？而这是一个反应形式，为什么ngModel在这。 Angular的新手。请帮助 – Sam

您需要告诉Angular当收音机输入改变时该怎么做。例如，你可以用'[（ngModel）]''或''（change）''来做到这一点。查看md的github页面上的最后一个代码示例：https://github.com/angular/material2/blob/6e4fe5e4172bb150f8d46c9f007ba2c2ff5bdf3a/src/components/radio/README.md – Matt

您可以初始化组件中的值。只需将'selection.value'分配给您选择的值，例如在构造函数中或在声明变量时的右边。我编辑了我的帖子。 – Matt

答

您收到此错误，因为selection formControl尚未created.There是这两个可能的解决方案。

safe navigation operator使用（?.）作为*ngIf=selection?.value=='A'在访问无线电的值。

<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>

准备好你的表格视图呈现之前（即在组件的构造函数中准备表单。）

和默认值，以任何形式的控制可以当我们创建的给予形式控制。

例如在您的情况下，您可以按如下方式设置默认值selection窗体控件。

let myForm = new FormGroup({ selection : new FormControl('A') })

答

试试这个：

this.complexForm = fb.group({ 
         'name': [null, Validators.required], 
         'description': [null, Validators.required], 
         'file': ["A", Validators.required], 
        });

如何设置角度2中的单选按钮的默认值

相关推荐