如何使用角度反应形式正确地将数据绑定到单选按钮？答案

【问题标题】：how to correctly bind data to radio buttons using angular reactive forms?如何使用角度反应形式正确地将数据绑定到单选按钮？
【发布时间】：2020-06-20 14:24:35
【问题描述】：

我一直在努力使用响应式表单对单选按钮进行数据绑定。

我的html文件如下

<form [formGroup]="newserviceform" (ngSubmit)="AddNewServices()" class="form" novalidate>
  <div class=" form-group row">
    <div class="col-sm-3 col-xs-12">
      <p class="model-input-lables">Type(per)*:</p>
    </div>
    <div class="col-xs-12 col-sm-9">
      <label class="radio-inline">
        <input class="radio-icon" type="radio" value=1 (focus)="focusNewServiceForm()" name="packagePriceOptionType"
          formControlName="packagePriceOptionType" checked>
        Event
      </label>
      <label class="radio-inline">
        <input class="radio-icon" type="radio" value=2 (focus)="focusNewServiceForm()" name="packagePriceOptionType"
          formControlName="packagePriceOptionType">
        Person
      </label>
      <label class="radio-inline">
        <input class="radio-icon" type="radio" value=3 (focus)="focusNewServiceForm()" name="packagePriceOptionType"
          formControlName="packagePriceOptionType">
        Item
      </label>
      <div
        *ngIf="packagePriceOptionType.errors && ((packagePriceOptionType.dirty && packagePriceOptionType.touched)||isformsubited)">
        <p class="form-error-messege" *ngIf="packagePriceOptionType.errors.required">Price option is required</p>
      </div>
    </div>
  </div>

  <div *ngIf="packagePriceOptionType.value!=1" class=" form-group row">
    <div class="col-sm-3 col-xs-12">
      <p class="model-input-lables">Quntity*:</p>
    </div>
    <div class="col-xs-12 col-sm-9">
      <!-- onkeydown is an inbuilt function to trigger an instatant key press 
    here it reduce taking the value of e and - in a key press -->
      <input (focus)="focusNewServiceForm()" type="number" min="200" class="form-control input-popup"
        formControlName="packageItemQuntity" (keyup)="numericOnly($event)"
        onkeydown="return event.keyCode !== 69 && event.keyCode !== 189"
        onkeypress="return event.charCode >= 48 && event.charCode <= 57">
      <div
        *ngIf="packageItemQuntity.errors && ((packageItemQuntity.dirty && packageItemQuntity.touched)||isformsubited)">
        <p class="form-error-messege" *ngIf="packageItemQuntity.errors.forbiddenValueValidator">Invalid value</p>
        <p class="form-error-messege" *ngIf="packageItemQuntity.errors.required">Quntity is required</p>
        <p class="form-error-messege" *ngIf="packageItemQuntity.errors.min">Minimum quantity is 200 </p>
      </div>
    </div>
  </div>
</form>

我的ts 文件如下。我将单选按钮的初始值设置为1。但它不绑定。但我看到这可以通过使用模板驱动的表单来完成。但在这里我需要使用反应形式来做到这一点

  newserviceform: FormGroup;
  packagePriceOptionType: FormControl;
  packageItemQuntity: FormControl;

  ngOnInit() {
    this.createNewServiceForm();
  }

  createNewServiceForm() {
    this.createNewServiceFormControls();
    this.newserviceform = new FormGroup({
      packagePriceOptionType: this.packagePriceOptionType,
      packageItemQuntity: this.packageItemQuntity,
    });
  }

  createNewServiceFormControls() {
    this.packagePriceOptionType = new FormControl(1, [Validators.required]);
    this.packageItemQuntity = new FormControl(1, [
      Validators.min(1),
      this.forbiddenValueValidator(/^\d+(?:\.\d{1,2})?$/),
    ]);
  }

有人知道问题出在哪里吗？谢谢！！

【问题讨论】：

您能否纠正您的模板（HTML）。在 HTML 中没有正确引用 value 属性。
好的纠正！
@CharukaHerath，您可以尝试将value 更改为[value]（包括值周围的方括号）吗？？
@ManirajMurugan 我刚才试过了。但它没有用。谢谢！！
@CharukaHerath，您能否在单选按钮组处于工作状态的堆栈闪电战中重现您的问题stackblitz.com/edit/radio-buttons-reactive-forms-mfuz1p

标签： html angular typescript radio-button radio-group

【解决方案1】：

我检查了您的代码，问题在于在模板中分配 value 属性。当您编写value="1" 时，它会将string 的值“1”分配给value 属性。但是您使用的是反应形式的number 数据类型。

如果您希望它完美地工作，请在组件类中使用字符串类型，如下所示：

this.packageItemQuntity = new FormControl('1', [
      Validators.min(1),
      this.forbiddenValueValidator(/^\d+(?:\.\d{1,2})?$/),
    ]);

请在此处找到有效的 stackblitz - https://stackblitz.com/edit/angular-ynziux

【讨论】：

【解决方案2】：

不知何故，即使我们为输入单选元素中的 value 参数提供数值，它也会被处理为字符串。你可以这样做（例如[value] = 1），就像一个魅力。例如。

<input class="radio-icon" type="radio" [value=1] (focus)="focusNewServiceForm()" name="packagePriceOptionType" formControlName="packagePriceOptionType" checked>

【讨论】：