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

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

1 голос
/ 06 января 2020

Я создал форму в своем приложении. 

  mapForm = this.fb.group({
    name: ['', Validators.required],
    view: this.fb.group({
      width: ['', Validators.required],
      height: ['', Validators.required]
    })
  });

В этой форме я создаю JSON, как показано ниже: 

  {
    name: "x", 
    view:{ 
        width: "100%", 
        height: "100%" 
    } 
  }

Итак, моя форма: 

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label>
    First Name:
    <input type="text" formControlName="firstName" required>
  </label>

   <div formGroupName="view">
    <h3>View</h3>

        <label>
          width:
          <input type="text" formControlName="width">
        </label>

        <label>
          height:
          <input type="text" formControlName="height">
        </label>
    </div>
 </form>

Но я хочу разделить свойства значения ширины / высоты (100) и единицы (%) моего представления двумя входными элементами и объединить их в json. 

    <label>
      width:
      <input type="text" formControlName="height" value="100">
    </label>
    <label>
      unit:
      <input type="text" formControlName="unit" value="%">
    </label>

Но мой view.width будет "100%". Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 07 января 2020

почему бы и нет, в submit? 

submit(form)
{
   if (form.valid)
   {
      result={
        name:form.value.name,
        view:{
           width:form.value.width+form.value.widthUnit,
           heigth:form.value.height+form.value.heightUnit
        }
      }
      console.log(result)
   }
}

Если вы хотите использовать в. html просто concat, например, 

<div [style.height]="form.value.height+form.value.heightUnit"
     [style.width]="form.value.width+form.value.widthUnit">
</div>

Не обязательно, чтобы форма точно соответствовала ваш json пока вы не отправите его

0 голосов
/ 06 января 2020

Я могу только представить, что вы можете создать дополнительные поля элемента управления формы, а затем использовать .valueChanges с combineLatest() в элементах управления формы, к которым вы хотите присоединиться, и в подписке обновите значения этих обновленных элементов управления формы. Нет такой функциональности из-за реактивных форм. Однако, если у вас действительно нет причин делать это слияние на лету, лучше просто объединить их, когда вы получите значение формы, чтобы отправить его куда-нибудь.

Пример: 

combineLatest(
  this.form.controls.width.valueChanges(), 
  this.form.controls.unit.valueChanges()
).pipe(takeUntil(this.destroyed$)) // don't forget to have unsubscription
 .subscribe(([width, unit]) => {
   this.form.controls.combinedWidth.setValue(`${width}${unit}`);
   // if you're using onPush, also markForCheck() here
 });

Вы можете сделать это сразу после инициализации формы.

...