В моем приложении есть два поля ввода. Одно - это поле 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();
}
0
TreacleMark 9 Окт 2021 в 16:54

2 ответа

Лучший ответ

Вы можете subscribe перейти к событию valueChanges во время инициализации.

this.form.controls["Supplier"].valueChanges
    .subscribe(data => {
      if(data){
       this.form.controls['Subject'].setValue(data.SupplierName);
      }
    });
0
YogendraR 9 Окт 2021 в 14:17

this.form.get('Subject').value доступен только для чтения, если вы хотите установить значение для элемента управления формы, вы должны использовать .setValue(value), можете ли вы попробовать это и посмотреть, работает ли это:

this.form.get('Subject').setValue(data)
0
Toto 9 Окт 2021 в 14:43