angular - 在某些条件下隐藏输入字段

Question

我有一个输入字段，我希望它隐藏，它应该只在下拉菜单中的选择是“飞机类型”时才可见：这是 html 代码：

<mat-form-field appearance="outline" class="width-1 col-4">
      <mat-label>Type</mat-label>
      <mat-select formControlName="typeId">
        <mat-option *ngFor="let type of typeList" [value]="type.id">
          {{ type.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field appearance="outline" class="width-1 col-4">
      <mat-label>Type of Motor</mat-label>
      <input
        matInput
        placeholder="Type of Motor"
        formControlName="typeMotor"
        name="typeMotor"
        id="typeMotor"
      />
    </mat-form-field>

第一个 mat-form-field 是下拉菜单，第二个 mat-form-field 是我希望在某些条件下隐藏或可见的字段。

Answer 1

I would take an observable approach and attach an observable to [hidden]. You can listen to valueChanges of your form control and act accordingly. Remeber that even if you hide your form control, it is still present in your form, maybe you would want to also disable it, then it will not even appear in the formvalue, unless you call getRawValue(). So I would suggest the following:

isHidden$: Observable<boolean>;

// build your form, then call
this.isHidden$ = this.myForm.get('typeId').valueChanges.pipe(
  map((value: number) => {
    return this.typeList.find((x) => x.id === value)?.name !==
      'Type of Aircraft';
  })
);

Then attach this to your input:

  <input
    matInput
    [hidden]="isHidden$ | async"
    placeholder="Type of Motor"
    formControlName="typeMotor"
    name="typeMotor"
    id="typeMotor"
  />

Answer 2

在 TS 文件中创建一个名为的变量typeId并像这样传入 mat-select [(ngModel)]="typeId"。然后像这样在输入上添加ngIF条件*ngIf="typeId == 4"