Question

<input pInputText type="text" formControlName="description" class="form-control" placeholder="Required" *ngIf="pageModes[formModel.schema.mode] === pageModes[pageModes.View] />

上面是我使用的输入框。我的状况：

IF(pageModes[formModel.schema.mode] === pageModes[pageModes.View])
{
    -----------(disable the input box)-------------------
}
ELSE
{
    -----------(enable the input box)-------------------
}

当我仅使用条件 pageModes[formModel.schema.mode] === pageModes[pageModes.View] 时，输入框将不可见。

有人可以使用条件 "pageModes[formModel.schema.mode] === pageModes[pageModes.View]"

来禁用输入框吗？

Answer 1

您可以改用[disabled]="*** your condition ***"。输入元素上的每个html属性都可以使用[attribute]进行绑定。

在您的情况下，这将是：

<input pInputText 
    type="text" 
    formControlName="description" 
    class="form-control" 
    placeholder="Required" 
    [disabled]="pageModes[formModel.schema.mode] === pageModes[pageModes.View] />

您还可以使用formControlName并在控制器中将其设置为禁用。

Answer 2

删除您的*ngIf并将禁用状态添加到您的formControl：

// Whereever you're building your form:
description: new FormControl({value: '', disabled: pageModes[formModel.schema.mode] === pageModes[pageModes.View]})

Answer 3

将inputDisabled属性添加到您的组件中

export class Component{
   get inputDisabled(){
    return // add your disable logic here 
   }
}

将此属性设置为输入属性

<input [disabled]="inputDisabled"  .../>

Answer 4

使用 this.registerForm.controls['firstName'].disable(); 禁用输入字段。
如果您的form Group是-

       this.registerForm = this.formBuilder.group({
            firstName: ['', Validators.required],
            lastName: ['', Validators.required],
            email: ['', [Validators.required, Validators.email]],
            password: ['', [Validators.required, Validators.minLength(6)]]
        });

Demo making input field disable on button click

如何使用ngIf条件禁用输入框？

4 个答案: