Angular 如何在从下拉列表中选择自定义选项后启用输入文本框？

JSON数据

 loginValue: any[] = [
    { value: 'col-1', viewValue: 'facebook' },
    { value: 'col-2', viewValue: 'google' },
    { value: 'col-1', viewValue: 'Custom' }
  ];

HTML

{{loginvalue.viewValue}}

您需要的是模型绑定到变量：

[（ngModel）]=“selectedValue”

并在禁用属性中使用该变量。然后像这样检查禁用属性

  [disabled]="selectedValue.viewValue!=='Custom'"

请注意：

[value]=“loginvalue”

检查示例，您将找到ngmodel示例

这是我更改的代码

<mat-form-field>
    <mat-select placeholder="login Value" [(ngModel)]="selectedValue" [disabled]="isDisabled1">
        <mat-option *ngFor="let loginvalue of loginValue" [value]="loginvalue">
            {{loginvalue.viewValue}}
        </mat-option>
    </mat-select>
</mat-form-field>

<div class="col-md-2">
    <mat-form-field class="Custom">
        <input matInput placeholder="Enter Custom Value" [disabled]="selectedValue.viewValue!=='Custom'">
                  </mat-form-field>
  </div>

{{loginvalue.viewValue}}

---

您可以尝试使用反应式表单，方法是订阅所选选项，并操作启用/禁用输入控件

TS:

changeState() {
    this.form.get('logintype').valueChanges
      .subscribe(res => {
        if (res === "Custom") { this.form.get('customInput').enable() }
        else { this.form.get('customInput').disable() }
      });
  }

<form [formGroup]="form">
    <mat-form-field>
        <mat-select formControlName="logintype" placeholder="Select an option" (selectionChange)="changeState()">
            <mat-option *ngFor="let option of loginValue" [value]="option.viewValue">
                {{ option.viewValue }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <input matInput formControlName="customInput" type="text">
  </mat-form-field>

</form>

HTML:

changeState() {
    this.form.get('logintype').valueChanges
      .subscribe(res => {
        if (res === "Custom") { this.form.get('customInput').enable() }
        else { this.form.get('customInput').disable() }
      });
  }

<form [formGroup]="form">
    <mat-form-field>
        <mat-select formControlName="logintype" placeholder="Select an option" (selectionChange)="changeState()">
            <mat-option *ngFor="let option of loginValue" [value]="option.viewValue">
                {{ option.viewValue }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <input matInput formControlName="customInput" type="text">
  </mat-form-field>

</form>

{{option.viewValue}}

---

下面是

@shreBatale上的示例代码，很抱歉，我没有正确保存stackblitz，新的更改使其更加简单，请检查OutError错误：formControlName必须与父formGroup指令一起使用。您需要添加一个formGroup指令并向其传递一个现有的formGroup实例（您可以在类中创建一个）。@您可以编辑stackblitz并告诉我问题出在哪里吗？我想您需要在构造函数中初始化fromControlName