Question

我正在使用Angular7，并且希望将select元素设置为只读或有条件地禁用。

对于只读，我尝试过：

  editable: boolean = true;

和模板：

 <select  #listOfOptions="ngModel" [(ngModel)]="myList" [readonly]="!editable" class="form-control">
    </select>

这导致：

错误：模板解析错误：无法绑定到“ readOnly”，因为它不是“ select”的已知属性。

有一个issue，尚无解决方案！

对于残疾人，我尝试过：

<select [attr.disabled]="!editable">
...
</select>

无论我如何设置可编辑变量，它始终处于禁用状态。

谢谢您的帮助。

Answer 1

您应该使用disabled而不是attr.disabled

<select [disabled]="!editable">
...
</select>

Answer 2

这可能并不完全有用，因为我可以看到您正在使用“模板驱动表单”，但是我建议您将其作为您可能要研究的替代方法！

如果要为此切换到使用“响应式表单”，则可以在初始化表单时设置Disabled属性。涉及的锅炉更多，我认为这使某些人脱离了反应式表格，但我发现我个人比较喜欢它们。

像这样设置HTML：

<form [formGroup]="selectForm">
  <select formControlName="mySelect">
    <!-- Put your options in here with an *ngFor over an array in your component -->
  </select>
</form>

然后像这样设置您的组件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
// Note: You will need to import the ReactiveFormsModule in your nearest local ngModule

@Component({...})
export class MyComponent implements OnInit {

  public selectForm: FormGroup;
  public editable: boolean;
  public options: any[];

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.selectForm = this.formBuilder.group({
      mySelect: [
        { value: '', disabled: !editable }
      ]
    });
  }

}

因此，表单控件现在将具有“已禁用”属性，直接将其绑定到您的本地变量“可编辑”，并且应该可以根据需要工作。

Answer 3

我在所有者帖子上也遇到了同样的问题。

我尝试了接受的答案，但是它对我没有帮助。

在此链接有效后，我使用[attr.disabled]="!editable ? '' : null"。

Angular 4 select disabled is not working

我分享了对谁的关心。

<select [attr.disabled]="!editable ? '' : null">
  <option></option>
</select>

如何使Select下拉列表变为只读或有条件地禁用角度？

3 个答案: