Enable textbox if checkbox checked angular 6

Question

Trying to find a few examples on this, but all I seem to find are AngularJs examples.

Is it possible to enable my textbox when the checkbox in the same row is checked, without binding the checkbox to a boolean value, and binding that value to my `textbox', or without the need to write some Javascript?

<ng-container *ngIf="showRowTextBox">
    <td>
        <input type="text" placeholder="Enter text here" disabled onfocusout="onTextBoxFocusOut(row)"/>
    </td>
    <td>
        <input type="checkbox" />
    </td>
</ng-container>

For reference, here is the entire table layout:

<table *ngIf="hasData" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th #tableBody *ngFor="let column of columns">
                {{ column }}
            </th>
            <th *ngFor="let buttonColumnName of buttonColumnNames">
            </th>
            <ng-container *ngIf="showRowTextBox">
                <th>{{ textBoxColumnName }}</th>
                <th>{{ checkBoxColumnName }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of model">
            <ng-container *ngFor="let columnDataName of columnDataNames">
                <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
                    <ng-container *ngIf="modelConfig[columnDataName].isDate;">
                        {{ row[columnDataName] | date:'d MMM yyyy' }}
                    </ng-container>
                    <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
                        <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
                    </ng-container>
                    <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
                        {{ row[columnDataName] }}
                    </ng-container>
                </td>
            </ng-container>
            <td *ngFor="let buttonColumnName of buttonColumnNames">
                <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'">{{buttonColumnName}}</button>
            </td>
            <ng-container *ngIf="showRowTextBox">
                <td>
                    <input type="text" placeholder="Enter text here" disabled  onfocusout="onTextBoxFocusOut(row)"/>
                </td>
                <td>
                    <input type="checkbox"/>
                </td>
            </ng-container>
        </tr>
    </tbody>
</table>

I have added the entire markup for this table. I do not understand what context I could give, other than, each row will contain the input field and the checkbox, input will be disabled by default, and on select of checkbox, I need the input field enabled, without binding to boolean value in .ts file or writing javascript code — monstertjie_za
– monstertjie_za, Commented Sep 24, 2018 at 18:04

Walter Luszczyk · Accepted Answer · 2019-10-22 16:10:26Z

5

You can bind the disabled property of the text input to the checkbox state with the help of a template reference variable. In order for the binding to work, the ngModel directive should also be applied to the checkbox.

<ng-container *ngIf="showRowTextBox">
  <td>
    <input type="text" [disabled]="!chkEnable.checked" ... />
  </td>
  <td>
    <input #chkEnable ngModel type="checkbox" />
  </td>
</ng-container>

See this stackblitz for a demo.

edited Oct 22, 2019 at 16:10

Walter Luszczyk

1,5322 gold badges20 silver badges37 bronze badges

answered Sep 24, 2018 at 18:13

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

monstertjie_za Over a year ago

Perfect, I knew I read about this somewhere, but could not get the right terminology to google :-( Thanks for your quick response, I will not forget this one

Collectives™ on Stack Overflow

Enable textbox if checkbox checked angular 6

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related