Question

我一直在努力使用反应式表单对单选按钮进行数据竞标。

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

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

Answer 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

Answer 2

即使我们为输入单选元素中的value参数提供数值，它也将作为字符串处理。您可以改为这样做（例如[value] = 1），就像一个超级按钮。例如。

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

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

2 个答案: