角度輸入更新驗證器

Question

我正在使用角度6進行開發，我實現了如下輸入（角度材料框架的墊輸入），並且已將ID分配給FormGroup驗證器。 當我初始化打字稿類時，我更新了輸入值，但驗證器看不到它，並且當我使用this.formGroup.valid檢查它時，它返回false，但值正確。 這是我的代碼

constructor(...) {

    this.formGroup = formBuilder.group({
        id_conto: [Validators.required, Validators.pattern("[0-9]+")],
        channel: [Validators.required, Validators.pattern("[0-9]+")],
        automatic_size: [],
        pip_stoploss: [Validators.required, Validators.pattern("[0-9]+")]
    });


    this.user = api.getUser();
    this.user.subscribe((response) => {
        this.userInstance = response;
    });

    this.editClicked();
}

editClicked() {
    if (this.formGroup.valid) {
        this.editing = !this.editing;
        if (!this.editing)
            this.formGroup.disable();
        else
        this.formGroup.enable();
    }
}

和我的html代碼

<mat-form-field class="form-full-width">
          <input matInput placeholder="Channel" formControlName="channel"
                 [errorStateMatcher]="matcher" [value]="userInstance.channel">
          <mat-error *ngIf="formGroup.get('channel').hasError('pattern') && !formGroup.get('channel').hasError('require')">
            Inserisci un valore numerico
          </mat-error>
          <mat-error *ngIf="formGroup.get('channel').hasError('require')">
            Inserire un valore
          </mat-error>
        </mat-form-field>

Answer 1

您正在使用反應形式。 要更新表單控件值，請使用表單對象而不是模板內部進行。

去掉：

[value]="userInstance.channel"

代替：

this.user.subscribe((response) => {
  this.userInstance = response;
  this.formGroup.controls.channel.setValue(this.userInstance.channel);
});

這也應該更新可見值。