Question

我理解如何指定要禁用的被动表单控件的初始状态。

someControl: [{value: '', disabled: true}]

如何根据表单中另一个值的选择，以编程方式稍后更改禁用状态。所以，例如如果someControl在下拉列表中选择了某个值，则应禁用anotherControl，否则启用{/ p>}。

由于

Answer 1

您可以使用您的选择字段来查看<div class="clearfix margin_bottom30"> <div class="form-group"> <label class="col-sm-4 control-label text_left">University</label> <div class="col-sm-8 multiselect_container"> <select class="mutisel" multiple="multiple" value="university_all_list.id" name="universityId" id="userName" required> {% for university_name in university_all_list %} {% if university_name.id == university_list.id%} <option value="{{ university_name.id }}" selected>{{ university_name.name }}</option> {% else %} <option value="{{ university_name.id }}" >{{ university_name.name }}</option> {% endif %} {% endfor %} </select> <script> $("select.mutisel").multipleSelect({ filter: false, placeholder: "Select", }); </script> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label text_left">User Type</label> <div class="col-sm-8 multiselect_container"> <select class="mutisel" multiple="multiple" value="master_user_types.id" name="masterUserId" id="userName" required> {% for master_user in master_user_types %} {% if master_user.id == university_list.id %} <option value="{{ master_user.id }}" selected>{{ master_user.userType }}</option> {% else %} <option value="{{ master_user.id }}" >{{ master_user.userType }}</option> {% endif %} {% endfor %} </select> <script> $("select.mutisel").multipleSelect({ filter: false, placeholder: "Select", }); </script> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label text_left">User</label> <div class="col-sm-8 multiselect_container"> <select class="mutisel" multiple="multiple" value="users.id" name="masterUserId" id="userName" required> {% for user in users %} <option value="{{ user.id }}" selected>{{ users.name }}</option> {% endfor %} </select> <script> $("select.mutisel").multipleSelect({ filter: false, placeholder: "Select", }); </script> </div> </div>，这是一个带有下拉列表和输入字段的示例，我们将根据从下拉列表中选择的值禁用/启用该字段：

valueChanges

这是

DEMO

编辑：

正如developer033建议的那样，你也可以使用简单的更改事件，其中模板......

this.myForm = this.fb.group({
  selects: [''],
  inputField: ['']
})

  // subscribe to changes in select field, if the value chosen is "two", 
  // disable input field, else enable field
  this.myForm.get('selects').valueChanges.subscribe(val => {
    if(val === 'two') {
      this.myForm.get('inputField').disable()
    }
    else {
      this.myForm.get('inputField').enable()
    }
  })

和组件将是：

<select formControlName="selects" (change)="checkValue()">
  <option disabled></option>
  <option *ngFor="let a of arr">{{a}}</option>
</select>

Answer 2

这应该有效

this.someControl.reset({value: '', disabled: true});

以编程方式禁用反应式表单组件

2 个答案:

DEMO

编辑：