如何在角度 2 中绑定和保存单选按钮值？答案

【问题标题】：How to bind & save radio button values in angular 2?如何在角度 2 中绑定和保存单选按钮值？
【发布时间】：2018-08-22 07:35:39
【问题描述】：

这里我使用 mongoose 的嵌套属性 Schema 来嵌套所有“stages”，然后在 typescript 中使用 formGroup。

我不确定收音机的 formControlName 应该是什么按钮 因为它需要相似？

另外，不确定我是否遗漏了什么？

代码：

// 架构

const userSchema = new Schema({
    name: { type: String, required: true },
    email: { type: String, required: true },
    stages: {
      stageOne:   { type: Boolean, default: false },
      stageTwo:   { type: Boolean, default: false },
      stageThree: { type: Boolean, default: false }
});

// typescript/component.ts

this.form = this.formBuilder.group({
   name: [''],
   email: [''],
   stages: this.formBuilder.group({
     stageOne: [null],
     stageTwo: [null],
     stageThree: [null]
   });
});

// html/template.html

<form [formGroup]="form">
  <div class="form-group">
     <input name="name" class="form-control" id="name" type="text" [(ngModel)]="name" formControlName="name">
     <input name="email" class="form-control" id="email" type="email" [(ngModel)]="email" formControlName="email">

     <div class="custom-control custom-radio">
        <input type="radio" id="stageOne" class="custom-control-input" [(ngModel)]="stageOne" formControlName="???">
        <label class="custom-control-label" for="stageOne">1</label>
     </div>
     <div class="custom-control custom-radio">
        <input type="radio" id="stageTwo" class="custom-control-input" [(ngModel)]="stageTwo" formControlName="???">
        <label class="custom-control-label" for="stageTwo">2</label>
     </div>
     <div class="custom-control custom-radio">
        <input type="radio" id="stageThree" class="custom-control-input" [(ngModel)]="stageThree" formControlName="???">
        <label class="custom-control-label" for="stageThree">3</label>
     </div>
  </div>
</form>

【问题讨论】：

标签： node.js angular typescript mongoose

【解决方案1】：

它与您的其他输入表单控件没有什么不同。但是，ControlValueAccessor 将从您的单选按钮获取值，因此您不需要额外的 ngModel 指令。当您提交表单时，来自对象本身 this.form.value 将包含您的所有表单值。

反应式表单

this.form = this.formBuilder.group({
   name: [''],
   email: [''],
   stages: ['1']
});

模板

<form [formGroup]="form">
  <div class="form-group">
     <input name="name" class="form-control" id="name" type="text" formControlName="name">
     <input name="email" class="form-control" id="email" type="email" formControlName="email">

     <div class="custom-control custom-radio">
        <input type="radio" id="stageOne" class="custom-control-input" formControlName="stages" [value]="1">
        <label class="custom-control-label" for="stageOne">1</label>
     </div>
     <div class="custom-control custom-radio">
        <input type="radio" id="stageTwo" class="custom-control-input" formControlName="stages" [value]="2">
        <label class="custom-control-label" for="stageTwo">2</label>
     </div>
     <div class="custom-control custom-radio">
        <input type="radio" id="stageThree" class="custom-control-input" formControlName="stages" [value]="3">
        <label class="custom-control-label" for="stageThree">3</label>
     </div>
  </div>
</form>

【讨论】：

我相信对于单选按钮，名称/formControlName 属性需要相同才能选择其中之一，否则它会选择所有按钮并用作复选框。