angular - 如何在不使用动态变量名称的 ngmodel 的情况下将 mat-slider 的值绑定到 angular 的 mat-input？

Question

我想将我的值绑定mat-slider到mat-input.

我不需要使用ngModel双向绑定，因为我使用的是formcontrolname.

我的表单控件名称由两部分组成。第一部分是固定的，另一部分是可变的。

这是我的html部分：

      <mat-label>{{relSizFilteredTitle}}</mat-label>
        <h3>Minimum value :</h3>
        <mat-slider
                    invert="false"
                    max="80"
                    min="50"
                    step="1"
                    thumbLabel="true"
                    [(value)]="relSizFilteredTitle + '_min'"
                    tickInterval="true"
                    [formControlName]="relSizFilteredTitle + '_min'"
                    vertical="false">
        </mat-slider>
        <input matInput [formControlName]="relSizFilteredTitle + '_min'"
                   type="number"
                   autocomplete="false"
                   min="50"
                   max="80"
                   required
                   placeholder="">

如您所见，我打算使用两种方式绑定 value 属性。但 angular 不接受relSizFilteredTitle + '_min'作为变量名。

您可能应该知道在 .ts 文件中我有这些：

  goForward(stepper: MatStepper, operation?: string, element?: any) {
    this.operation = operation;
    stepper.next();
    this.secondFormGroup.valueChanges.subscribe(data => this.onSecondFormGroupValueChange(data));

  }

  onSecondFormGroupValueChange(data) {
    // ==> I want to do sth here.
    console.log(data);
  }

如何绑定 mat-slider 和 mat-input 的值，反之亦然？

标签： angulartwo-way-binding