Question

我正在使用模型驱动的模板。如果未选中复选框，我想禁用输入。但它不能使用formControlName。我试过三种方式。给这里

 1.disabled="!filterForm.value.customer_limit"
 2.[disabled]="!filterForm.value.customer_limit"
 3.[readonly]="!filterForm.value.customer_limit"

这是我的HTML代码：

 <md-checkbox [checked]="filterForm.value.customer_limit" formControlName="customer_limit">
                        <md-input-container class="full-width">
                            <input mdInput
                                   formControlName="customer_limit_input"
                                   [disabled]="!filterForm.value.customer_limit"
                                   placeholder="Limit to customers">
    </md-input-container>
    </md-checkbox>

有任何想法请帮助我。感谢

Answer 1

对于被动表单，[disabled]或disabled不起作用。您可以使用的是检查是否选中了复选框，并禁用或启用输入字段。

首先，我从复选框中删除了输入字段，并不确定它放在那里的原因。

然后在构建表单时，我创建了一个if语句来检查customer_input的值，然后禁用输入字段，如果它是假的：

if this.myForm.get('customer_limit').value === true
  this.myForm.get('customer_limit_input').enable()

IF 你虽然知道customer_limit最初的布尔值，但你可以跳过上面的内容，并且最初只是禁用该字段（如果是这种情况），就像Shailesh建议的那样：

customer_limit_input: [{value: 'something', disabled: true}]

我发布了一个更改事件来观察复选框的状态，并在发生更改时调用函数：

<md-checkbox (change)="disableEnableInput(myForm.get('customer_limit').value)" 
  formControlName="customer_limit">
</md-checkbox>
<md-input-container class="full-width">
  <input mdInput formControlName="customer_limit_input">
</md-input-container>

disableEnableInput()功能：

disableEnableInput(bool: boolean) {
  if bool === true
    this.myForm.get('customer_limit_input').enable()
  else
    this.myForm.get('customer_limit_input').disable()
}

我不知道是否有一个更优雅的解决方案（？）但这是我到目前为止使用的。

此处 DEMO

Answer 2

Assalamualaikum，

在您的组件中，请确保定义boolean变量以保持输入状态：

  disabled: boolean = true;

并在模板中将其切换为以下内容：

<md-checkbox [(ngModel)]="disabled">Toggle Input</md-checkbox>
<input mdInput [disabled]="disabled">

对于模型驱动的表单，

编辑，请将模板格式化为：

 <md-checkbox [formControl]="checkbox">Toggle Input</md-checkbox>
 <input mdInput [disabled]="disabled">

在您的组件中，您可以像这样收听更改：

disabled: boolean;
ngOnInit(){
   this.checkbox.valueChanges.subscribe(val => this.disabled = val);
}

Answer 3

我从here设置了禁用formControlName的解决方案。

form = new FormGroup({
    'first': new FormControl({value: 'hello', disabled: false})
  })

ngOnInit(): void {
        this.filterForm.valueChanges.subscribe(
            (formValue) => {
               console.log(formValue)
            }
        );
    }

禁用不使用formControlName到角度2的模型驱动形式？

3 个答案: