如何根据 Angular 中的组合框选择填充文本框？

Question

所以，我有一个组合框，我希望每当我从组合框中选择某些内容时自动填充我的文本框。我的组合框被命名为飞机类型，它应该自动填充名为“电机数量和 MTOW”的文本框和名为“电机类型”的组合框。它们都来自一个 API，并且它们都相互关联。 这是我的组合框和文本框的代码：

<mat-form-field appearance="outline" class="width-4">
          <mat-label>Aircraft Type (ICAO)</mat-label>
          <mat-select formControlName="aircraftType" required>
            <mat-option *ngFor="let item of aircraftTypes" [value]="item.value">
              {{ item.label }}
            </mat-option>
          </mat-select> </mat-form-field
        ><br />
        <mat-form-field appearance="outline" class="width-3">
          <mat-label>Number of Motors</mat-label>
          <input
            maxlength="50"
            matInput
            formControlName="numberMotors"
            placeholder="Number of Motors"
            required
          />
        </mat-form-field>
        <mat-form-field appearance="outline" class="width-3">
          <mat-label>Type of Motor</mat-label>
          <mat-select formControlName="typeMotors" required>
            <mat-option *ngFor="let item of motorTypes" [value]="item.value">
              {{ item.label }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="outline" class="width-3">
          <mat-label>MTOW (kg)</mat-label>
          <input
            maxlength="50"
            matInput
            formControlName="mtow"
            placeholder="MTOW"
            required
          />
        </mat-form-field>

Answer 1

由于您使用的是响应式表单，因此只要您的 aircraftType 控件更改其值，您就可以将值设置为相应的表单控件。

@Component({...})
export class AircraftFormComponent implements OnInit, OnDestroy {
  public form:FormGroup = this.fb.group({
    aircraftType: '',
    numberMotors: '',
    typeMotors: '',
    mtow: ''
  });

  // Cleanup, not nescessary but a best practice
  private _destroyed$: Subject<void> = new Subject();

  constructor(
    private fb:FormBuilder, 

    // Assuming you get your JSON from a service similiar to this and find the value for a given aircraftType by a method called `getValuesForAircraftType`
    private aircraftApi:AircraftApi 
  ) {}
 
  public ngOnInit():void {
    // Subscribe to the valueChanges of your aircraftType, this will trigger whenever you select something for "aircraftType" (=> the value of aircraftType" changes)
    this.form.get('aircractType').valueChanges
      .pipe(
        // Cleanup when destroyed, not strictly nescessary but a best practice
        takeUntil(this._destroyed),

        // Assuming your API returns an observable, use switchMap to cancel previous request when value changes before this the last one finishes
        // If your API does NOT return an observable but the value itself, use 'map' instead of 'switchMap'
        switchMap(aircraftType => this.aircraftApi.getValuesForAircraftType(aircraftType)),
        
      )
      // Using destructoring on the parameter to make this more readable, you can also just call the parameter something like "values" and use it as "values.numberMotors" and so on.
      .subscribe(({ numberMotors, typeMotor, mtow })=> {
        // Set the values form your JSON to your form controls
        this.form.get('numberMotors').setValue(numberMotors);
        this.form.get('typeMotors').setValue(typeMotor);
        this.form.get('mtow').setValue(mtow);
      });
  }

  public ngOnDestroy():void {
    this._destroyed.next();
    this._destroyed.complete();
  }
}