Как связать (и отсоединить) два элемента управления формы с помощью флажка - PullRequest
Новая
       37

Как связать (и отсоединить) два элемента управления формы с помощью флажка

0 голосов
/ 18 июня 2019

У меня есть группа форм, содержащая несколько полей.У меня также есть флажок.Когда флажок установлен, я бы хотел, чтобы одно из полей ввода получало значения из другого поля ввода.Если флажок не установлен, я бы хотел сделать поле независимым.

Я попытался использовать логическое значение флажка-формы управления для присвоения значений одного из полей ввода другому (сторона квадрата = стороны прямоугольника, если прямоугольник является квадратом), но Angular выдает сообщение об ошибке «слишком много рекурсии».

в component.ts 

ngOnInit() {
    this.formMain = this.fb.group({
      sideSquare: this.addSq.side,
      lenRect: this.addRect.len,
      widRect: this.addRect.wid,
      isSquare: true,      
    });
    this.onChanges();
  }
onChanges(): void {
    this.formMain.valueChanges.subscribe(val => this.updateValues());
  }

updateValues(): void {
    this.formMain.get('lenRect').setvalue(
      this.formMain.get('isSquare').value ?
      this.formMain.get('sideSquare').value : 0 );

    this.formMain.get('widRect').setvalue(
      this.formMain.get('isSquare').value ?
      this.formMain.get('sideSquare').value : 0 );

}

incomponent.html 

<form [formGroup]="formMain">
  <mat-card>
    <mat-card-header>
      <mat-card-title>Square vs Rectangle</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <mat-form-field>
        <input matInput placeholder="Square side" type="number" formControlName="sideSquare">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Rectangle length" type="number" formControlName="lenRect">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Rectangle length" type="number" formControlName="widRect">
      </mat-form-field>
      <mat-checkbox formControlName="isSquare">Rectangle is a square</mat-checkbox>
    </mat-card-content>
  </mat-card>
</form>

Эта проблема аналогична формам, в которых адрес доставки совпадает с адресом выставления счета (но проще).Я нашел другой вопрос по проблеме адресации, но предложенный ответ не работал для меня.

Есть ли способ сделать это хорошо?Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 18 июня 2019

Не усложняйте:

Stackblitz 

form = new FormGroup({
  'f1': new FormControl(''),
  'f2': new FormControl(''),
  'propagate': new FormControl(false),
});

ngOnInit() {
  this.form.valueChanges.pipe(
    filter(formValue => formValue.propagate),
    map(formValue => formValue.f1),
  ).subscribe(f1 => this.form.get('f2').setValue(f1, { emitEvent: false }));
}

В этом примере F1 - это главное управление, а F2 - подчиненное управление.

Вы слушаете изменения значения формы: если флажок установлен, то вы делаете что-то, а иначе - нет.

Затем вы отображаете значение формы только на значение F1.

Наконец, вы устанавливаете значение F2 в соответствии с F1, не испуская событие (чтобы предотвратить бесконечный цикл)

...