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

Question

I have struggled to do data biding to radio buttons using reactive forms.

My html file is as below

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

my ts file is as below. I am setting the initial value of the radio button to 1 . But it does not bind. But I saw that this can be done by using template driven forms. But here i need to do this using reactive forms

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

Do anyone have an idea where is the issue? Thanks!!

Answer 1

I have checked your code and the issue is in assigning value attribute in template. When you are writing value="1" , it assign value of string "1" to value attribute. But you are using number data type in reactive form.

If you want it to work perfectly use string type in your component class like done below:

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

Please find the working stackblitz here - https://stackblitz.com/edit/angular-ynziux

Answer 2

Somehow even if we provide numeric value to the value parameter in the input radio element, it is processed as strings. You can this instead(eg. [value]=1), works like a charm. eg.

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