In my angular 6 application, i am making a reactive form which has,
Html
<form [formGroup]="form">
<h2>Click the add button below</h2>
<button (click)="addCreds()">Add</button>
<div formArrayName="credentials" >
<div *ngFor="let creds of form.get('credentials').controls; let i = index"
[formGroupName]="i" style="display: flex">
<select formControlName="action">
<option *ngFor="let option of options" value="{{option.key}}">
{{option.value}}
</option>
</select>
<input placeholder="Name" formControlName="name">
<div *ngIf="creds.value.action=='set' ||
creds.value.action=='go'">
<input placeholder="Label" formControlName="label">
</div>
</div>
</div>
</form>
Here i have used
<div *ngIf="creds.value.action=='set' || creds.value.action=='go'">
<input placeholder="Label" formControlName="label">
</div>
which will display the field label
if the condition is true or else it will not be displayed.
But i need to only disable that field and should not remove it completely..
For which i have tried,
<input [disabled]="creds.value.action != 'set' ||
creds.value.action != 'go' " placeholder="Label" formControlName="label">
But it doesn't works.
Stackblitz with *ngIf https://stackblitz.com/edit/angular-form-array-example-25y1ix
Stackblitz with disabled https://stackblitz.com/edit/angular-form-array-example-laftgu
Kindly help me how to disable the label
field if the selected action
(first dropdown) value is wait
..