angular - 如何以反应形式将幻灯片值同步到输入字段中

Question

我现在有一个问题，我不知道如何将幻灯片值同步到反应形式的输入字段中。

我显示我的代码：

<div fxLayout="row">
    <mat-slider class="slider" color="primary" max="1" min="0" step="0.1" thumb-label="true"
                [(ngModel)]="dataService.adress"
                [disabled]="!dsearchDataService.sendAdress"
    ></mat-slider>
    <form [formGroup]="addressForm">
      <mat-form-field class="input">
        <input matInput type="number" step="0.1" max="1" min="0" maxlength="3"
               [(ngModel)]="dataService.address"
               formControlName="address">
        <mat-error *ngIf="address.invalid">Ivalid Value</mat-error>
      </mat-form-field>
    </form>
  </div>

现在您看到了，在更改代码之前的这种反应形式中，我使用 ngModel 在幻灯片和输入字段之间绑定了两个值。

但在反应形式中，应该删除 ngModel 而不是 formControlName。

在 ts 文件中：

public ngOnInit(): void{
    this.addressForm = this.fb.group({
      address: new FormControl({value: this.dataService.address, disabled: !this.dataService.sendAddress}, [Validators.pattern('/^[0-9]*$/'])
    });
  }

我的问题是，如果幻灯片值更改，现在我想将幻灯片值同步到输入字段中。

有什么解决办法？？

标签： angularreactive-forms

Answer 1

我解决了这个问题：

就我而言，我使用的是反应式表单。

在 *.html 文件中：

<mat-form-field>
  <input
    matInput
    type="text"
    formControlName="field_name">
</mat-form-field>

...

<mat-slider
  class="slider"
  [max]="slider.max"
  [min]="slider.min"
  [step]="slider.step"
  [thumbLabel]="slider.thumbLabel"
  [color]="slider.color"
  [value]="slider_value"
  (change)="onSliderChange($event,'slider_name')"
  (input)="onSliderChange($event,'slider_name')">
</mat-slider>

在 *.ts 文件中：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

...

@Component({
  selector: 'app-something-create',
  templateUrl: './something-create.component.html',
  styleUrls: ['./something-create.component.css']
})
export class SomethingCreateComponent implements OnInit, OnDestroy {

form: FormGroup;

slider: MySlider = new MySlider();
slider_value: number;

  ngOnInit(): void {
    this.form = new FormGroup({'field_name': new FormControl({value: this.slider_value}, {})}
  }

...

  /**
   * @brief On Slider Change update the value in the Measurement and in the form to be displayed
   */
  onSliderChange($event, value_: string){
    /* You can extend this switch to use more than one slider, giving them different names */
    switch(value_){
      case 'slider_name':
        this.slider_value = $event.value;
        this.form.get('field_name').setValue(this.slider_value);
        break;
    }
  }

  ngOnDestroy(): void {
  }
}

/*
* @brief General class to initialize sliders
*/
class Slider {
  max: number;
  min: number;
  step: number;
  thumbLabel: boolean;
  color: string;
}

/*
* @brief Custom initialized slider
*/
class MySlider extends Slider {
  max = 10;
  min = 1;
  step = 0.1;
  thumbLabel = false;
  color="primary";
}

让我知道这是否适合您。快乐编码！