Question

我想将2个输入控件相互连接，所以当一个更改时，它会更新另一个。例如，它的2个百分比字段，如果我将1设置为80，则另一个将设置为20以将其平衡为总计100。

两个输入都在一个表单组中，所以我觉得我应该使用这些和方法来订阅值更改而不是触及本机元素或事件。

任何人都可以提出基本的方法吗？

Answer 1

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

在下面的代码中，当输入＃1发生变化时，它会更新输入＃2，反之亦然。

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

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

注意：这是非常基本的，全部是内联的，但在您的示例中，您希望为非数字字符添加一些错误处理，范围值＆gt;因此，您可能希望在组件定义中定义ngModelChange的处理程序（可能是在打字稿中），而不是像我在这里完成的那样在模板中定义。

Answer 2

我使用角度反应形式，并且能够创建一个绑定到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

您可以为该特定valueChanges订阅formControlName。例如，在您的控制器中，您可以执行

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

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

将2个角度2形式控件绑定在一起的正确方法是什么

3 个答案: