Как отключить поле ввода, используя условие ngIf?

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

Удалите ваш *ngIf и добавьте отключенный к вашему formControl:

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

Answer 2

добавить свойство inputDisabled в ваш компонент

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

установить это свойство для входного атрибута

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

Answer 3

Используйте 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)]]
        });

Демо, отключающее поле ввода при нажатии кнопки

Answer 4

Вместо этого вы можете использовать [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 и отключить его в контроллере.