从下拉菜单中选择自定义选项后如何启用输入文本框？答案

【问题标题】：How to Enable Input TextBox After selecting Custom Option From Drop Down?从下拉菜单中选择自定义选项后如何启用输入文本框？
【发布时间】：2019-05-05 11:07:47
【问题描述】：

JSON 数据

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

HTML

<mat-form-field>
                    <mat-select placeholder="login Value" [disabled]="isDisabled1">
                      <mat-option *ngFor="let loginvalue of loginValue" [value]="loginvalue.value">
                        {{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]="isDisabled1">
                  </mat-form-field>

我的下拉选项 facebook/google/Custom 中有三个值当我选择 facebook 和 Google 时，文本框输入必须被禁用，当我单击自定义选项时，输入文本框被启用如何在打字稿中编写逻辑或一切都可以在 HTML 中完成？提前致谢！

【问题讨论】：

标签： angular typescript angular-material angular5

【解决方案1】：

您需要的是模型绑定到变量：[(ngModel)]="selectedValue" 并在禁用属性中使用它。然后像这样检查禁用属性

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

请注意：[value]="loginvalue"

查看例子here你会发现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>

Stackblitz Demo

【讨论】：

@ShreeBatale 抱歉，我没有正确保存 stackblitz，现在有了新的更改，它变得更加简单，请结帐
ERROR 错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令并将现有的 FormGroup 实例传递给它（您可以在您的类中创建一个）。
@你能编辑 stackblitz 并告诉我问题出在哪里吗？
我猜你需要在构造函数中初始化 fromControlName

【解决方案2】：

您可以通过订阅您选择的选项并操作启用/禁用您的输入控件来尝试使用反应式表单。

TS：

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

HTML：

<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>

这是StackBlitz上的示例代码

【讨论】：