Conditionally make input field readonly in Angular 2 or 4: Advice + Best/which way to do it

问题

I was attempting to answer someone elses question. And in doing so realised there was quite a bit of uncertainty in my mind about a few things. I'm hoping someone can provide feedback on the numbered points 1..4:

Task: Conditionally make input field readonly

Relevant section of HTML:

<input type="text" placeholder="Club Name" #clubName>

Add this to Typescript component.

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

Have to say this is a grey area for me.

Is referencing HTMLInputElement or Element directly with @ViewChild in Angular 2+ a bad practice? Only, I've often seen examples using ElementRef or chaining off to nativeElement from ElementRef.

Since VS Studio doesn't have Intelli-sense for those, I suddenly feel like I'm coding in the dark. i.e, you never get feedback about methods setAttribute or removeAttribute, their parameter requirements etc. (I'm aware of As to cast too)

Then, after looking at the docs, I suspect you can do this directly on your input in the HTML template:

<input [attr.readonly]= "isReadOnly">

IIRC I think you have to do this way with a property get in Typescript:

get isReadOnly() :boolean {
}

Is this way valid?

I'm wondering, can you do the method syntax too in the HTML template:

<input [attr.readonly]= "isReadOnly()">

Typescript

isReadOnly() :boolean {
}

Is this way valid?

4. In summary, what's the best approach?

Update: There is also *ngIF so you output one of two input elements with same name. But that sounds to me like a sledgehammer to crack a nut.

回答1:

You need to use the following (Angular 4):

<input [readonly]="isReadOnly">

If you use att.readonly then the input will always be read-only because the readonly attribute will be present even if its value is false. By using [readonly] Angular will only place the attribute if isReadOnly is true.

In HTML, the following is sufficient to cause an input to be read-only:

<input readonly>

回答2:

You can use <input readonly="{{ variable }}>".

In your *.component.ts, initialize the variable:

private variable: boolean = true;

回答3:

All depends on what you want to achieve. At first look, I would say that pct. 2 is the simplest way to do it:

<input [attr.readonly]= "isReadOnly">

Then, on your component you declare the variable:

isReadOnly: boolean;

After, you assign the value as you wish:

// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;

来源：https://stackoverflow.com/questions/45226354/conditionally-make-input-field-readonly-in-angular-2-or-4-advice-best-which-w

标签

angular

readonly

attr

html-input