How can I update an input field based in another mat-select field with (selectionChange)method-CodePudding

First I select the field category_id and then update the field tax_id through the method updateTaxId()

component.html

<div mat-dialog-content [formGroup]="form">
  <div>
    <mat-form-field appearance="outline">
      <mat-label>CategoryID</mat-label>
      <mat-select formControlName="category_id" (selectionChange)="updateTaxId($event.value)">
        <mat-option value="">-select category-</mat-option>
        <mat-option *ngFor="let category of categories" [value]="category.id">{{category.name}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <div>
    <mat-form-field>
      <input matInput placeholder="TaxID" formControlName="tax_id">
    </mat-form-field>
  </div>
</div>

component.ts

updateTaxId(categoryId: any){
  this.form.value.tax_id = categories.find(r=>r.category_id==categoryId).tax_id
  //console.log(this.form.value)
}

I get to update the tax_id field in the form, but not refresh in the screen.

CodePudding user response：

Form controls (and reactive forms in general) work differently, you cannot assign a value like that. Check the api to see what you have available: https://angular.io/api/forms/FormControl

So you need to use setValue (or patchValue) to change a formcontrol value:

this.form.get('tax_id').setValue(categories.find(r=>r.category_id==categoryId)?.tax_id || '')