I want to enable inputbox on unchecked of checkbox. The checkbox will be checked by default. I have Tried the code. The code link is given below https://stackblitz.com/edit/angular-j6jewe
3 Answers
App.component.html
<div>
<form #f="ngForm" (ngSubmit)="save(f.valid, names)" novalidate>
<table>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
<th>Initial</th>
<th>Remark</th>
</tr>
<tr *ngFor="let name of names">
<td><input type="checkbox" [(ngModel)]="name.checked" [checked]="true" [name]="name.id + '_checkbox'"></td>
<td>{{name.id}}</td>
<td>{{name.name}}</td>
<td>{{name.Initial}}</td>
<td><input type="text" [(ngModel)]="name.remark" [disabled]="name.checked" [name]="name.id+ '_remark'"></td>
</tr>
</table>
<button type="submit">Submit</button>
</form>
<hr>
</div>
<div>
<div>Form details:-</div>
<pre *ngIf="f.submitted">submitted value: <br>{{names | json}}</pre>
</div>
Comments
You can do it like this:
<input type="text" [(ngModel)]="name.remark" [name]="name.id"
[attr.disabled]="name.checked ? 'disabled' : null">
https://stackblitz.com/edit/angular-sutilk?file=src/app/app.component.html
Comments
Issue: name attribute of checkbox and input box was same, so that both get disabled.
Solution: Differentiate name attribute of form components. For setting default value, checked attribute is added in names property initialization in app.component.ts.
StackBlitz solution: https://stackblitz.com/edit/angular-tfrang?file=src/app/app.component.html
