Как правильно привязать данные к переключателям, используя angular реактивные формы? - PullRequest
Новая
       54

Как правильно привязать данные к переключателям, используя angular реактивные формы?

0 голосов
/ 08 марта 2020

Я изо всех сил пытался связать данные с переключателями, используя реактивные формы.

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

У кого-нибудь есть идея, в чем проблема? Спасибо !!

1 Ответ

0 голосов
/ 08 марта 2020

Я проверил ваш код, и проблема заключается в назначении атрибута значения в шаблоне. Когда вы пишете value="1", ему присваивается значение string «1» для атрибута value. Но вы используете number тип данных в реактивной форме.

Если вы хотите, чтобы он отлично работал, используйте строковый тип в вашем классе компонентов, как показано ниже: 

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

Пожалуйста, найдите работающий Stabblitz здесь - https://stackblitz.com/edit/angular-ynziux

...