角度更新输入字段

Question

在我的应用程序中，我有两个输入字段。一个是mat-option 字段，另一个是常规输入字段。我想要的是，当我从mat-option 字段（供应商）中选择一个选项时，我希望该选项出现在常规输入字段（主题）中。到目前为止我编写的代码如下。现在，我无法让它工作。我该怎么办？

HTML：

<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="30" class="w-100-p"
                        ngClass.gt-xs="pr-4">
                        <mat-label>Supplier</mat-label>
                        <mat-select formControlName="Supplier">
                            <mat-option *ngFor="let sp of supplierList" [value]="sp">
                                {{sp.SupplierName}}
                            </mat-option>
                        </mat-select>
                        <mat-icon matSuffix class="secondary-text">person</mat-icon>
                    </mat-form-field>
                </div>
                <div fxLayout="row" fxLayoutAlign="start center">
                    <mat-form-field appearance="outline" fxFlex fxFlex.gt-xs="60">
                        <mat-label>Subject</mat-label>
                        <input matInput formControlName="Subject" maxlength="150" required 
                        >
                        <mat-icon matSuffix>short_text</mat-icon>
                    </mat-form-field>
                </div>

TS：

ngOnInit(): void {
    // Reactive Form
    this.form = new FormGroup({
        Subject: new FormControl("", [
            Validators.required,
            Validators.maxLength(150),
        ]),
        Supplier: new FormControl(
            this.previousReqest ? this.previousReqest.Supplier : "",
            Validators.required
        ),
    });

    this.form.controls["Supplier"].valueChanges
    .subscribe(data => {
      this.form.controls['Subject'] = data;
    });

    if (
        UserInformation.userAuthorizedRoutes &&
        UserInformation.userAuthorizedRoutes.length > 0
    ) {
        this.userRights = UserInformation.userAuthorizedRoutes.filter((x) =>
            new RegExp(x.Action).test(this._router.routerState.snapshot.url)
        )[0];
    }

    this.initializeUserSettings();
}

Answer 1

this.form.get('Subject').value是只读的，如果你想给一个表单控件设置一个值你应该使用.setValue(value)，你可以试试这个，看看它是否有效：

this.form.get('Subject').setValue(data)

Answer 2

您可以在初始化时将subscribe 转为valueChanges 事件。

this.form.controls["Supplier"].valueChanges
    .subscribe(data => {
      if(data){
       this.form.controls['Subject'].setValue(data.SupplierName);
      }
    });