时间戳

首页 > 解决方案 > 如何使用角度反应形式正确地将数据绑定到单选按钮？

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

问题描述

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

我的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})?$/),
    ]);
  }

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

标签： htmlangulartypescriptradio-buttonradio-group

解决方案

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

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

推荐阅读