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 /自定义当我选择facebook和Google时,必须禁用文本框输入;当我单击“自定义”选项时,要启用输入文本框,如何在打字稿中编写逻辑或可以完成所有操作仅在HTML中?提前致谢!
您需要的是将模型绑定到变量:[(ngModel)]="selectedValue"
并在disabled属性中使用它。然后像这样检查禁用的属性
[disabled]="selectedValue.viewValue!=='Custom'"
请注意 : [value]="loginvalue"
这是我更改的代码。
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句