Как правильно связать 2 угловых 2 элемента управления формой

Question

Я хочу соединить 2 элемента управления вводом друг с другом, поэтому, когда один меняется, он обновляет другой. Например, в его 2-процентных полях, если я установлю одно на 80, для другого будет установлено значение 20, чтобы сбалансировать его до 100.

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

Кто-нибудь может предложить базовый способ сделать это?

Answer 1

Я использую угловые реактивные формы и смог создать компонент, который связывается с формой FormGroup и именами элементов управления, например так:

<app-percentage-balance
    [formGroup]="form"
    firstControlName="firstControl"
    secondControlName="firstControl">

в моем компоненте у меня есть:

@Input() formGroup: FormGroup;
@Input() firstControlName: string;
@Input() secondControlName: string;

public ngOnInit(): void {
    this.firstControl = this.formGroup.controls[this.firstControlName] as FormControl;
    this.secondControl = this.formGroup.controls[this.secondControlName] as FormControl;

    this.firstControl.statusChanges.subscribe((status) => {
      if (status == "VALID") {
        // do stuff
      }
    });

    this.secondControl.statusChanges.subscribe((status) => {
      if (status == "VALID") {
        // do stuff
      }
    });
}

Answer 2

Вы можете подписаться на valueChanges для этого конкретного formControlName, Например, в вашем контроллере вы можете сделать

this.myForm.get('firstControl').valueChanges.subscribe(val => {
    this.myForm.patchValue({
       secondControl:100-val
    });
});

Вы должны повторить то же самое, чтобы слушать, когда второй элемент управления меняется. Не забудьте проверить с максимальными значениями, то есть установить максимум на 100.

Answer 3

Простой способ будет использовать ngModelChange событие, выпущенное одним input поле для обновления другого.

В приведенном ниже коде он обновляет вход № 2 при изменении входа № 1, и наоборот.

Input 1: <input type="text" [(ngModel)]="first" (ngModelChange)="second = 100 - first" />

Input 2: <input type="text" [(ngModel)]=second (ngModelChange)="first = 100 - second"/>

Примечание: это довольно просто, все встроено, но в вашем примере вы хотели бы добавить некоторую обработку ошибок для нечисловых символов, значений диапазона> 100 и т. Д. Поэтому вы можете определить обработчик для ngModelChange в определении ваших компонентов (предположительно в машинописи), а не в шаблоне, как я сделал здесь.