Question

这里我使用mongoose的嵌套属性Schema来嵌套所有“阶段”，然后在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>

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

如何绑定＆amp;以角度2保存单选按钮值？

1 个答案: