Enable respective inputbox on uncheck of checkbox in angular

Question

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

Answer 1

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>

Answer 2

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

Answer 3

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