将 2 angular 2 表单控件绑定在一起的正确方法是什么

Question

我想将 2 个输入控件相互连接起来，这样当其中一个发生变化时，它会更新另一个。例如，它的 2 个百分比字段，如果我将一个设置为 80，另一个将设置为 20 以将其平衡为总计 100。

两个输入都在一个表单组中，所以我觉得我应该使用它们和它们的方法来订阅值变化，而不是触及原生元素或事件。

任何人都可以提出解决问题的基本方法吗？

Answer 1

一种简单的方法是使用一个 input 字段发出的 ngModelChange 事件来更新另一个字段。

在下面的代码中，它会在输入 #1 更改时更新输入 #2，反之亦然。

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

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

注意：这是非常基本的，全部内联，但在您的示例中，您希望为非数字字符、范围值 > 100 等添加一些错误处理。因此您可能希望为 ngModelChange 在你的组件定义中（大概是在打字稿中）而不是像我在这里所做的那样在模板中。

Answer 2

我正在使用 angular 响应式表单，并且能够创建一个绑定到表单 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 3

您可以为那个特定的 formControlName 订阅 valueChanges。例如在你的控制器中你可以做

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

当第二个控件发生变化时，您应该重复相同的操作来收听。请记住也要使用最大值进行验证，即将最大值设置为 100。

将 2 angular 2 表单控件绑定在一起的正确方法是什么

What is the right way to bind 2 angular 2 form controls together

angular2-forms