如何使用动态变量名称将ng-slider的值绑定到没有ngmodel的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的值，反之亦然？