How to bind & save radio button values in angular 2?

Here I'm using the nested property Schema of mongoose to nest all the "stages" then using formGroup in typescript.

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

I'm not sure what should be the formControlName for the radio buttons as it needs to be similar?

我不确定单选按钮的formControlName应该是什么，因为它需要类似？

Also, not sure if I'm missing anything?

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

---

Code:

码：

// Schema

//架构

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

// typescript / component.ts

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

---

// html/template.html

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

1 个解决方案

#1

It is no different than with your other input form controls. However, the ControlValueAccessor will get the value from your radio button so you do not require the additional ngModel directives. When you submit your form the from object itself, this.form.value, will contain all your form values.

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

Reactive Form

反应表格

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

Template

模板

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