如果选中复选框，则启用文本框 角度 6

Question

试图找到一些这方面的例子，但我似乎找到的都是 AngularJs 的例子。

textbox当选中同一行中的 时，是否可以启用 my checkbox，而不将复选框绑定到某个boolean值，并将该值绑定到我的“文本框”，或者不需要编写一些 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>

作为参考，以下是整个表格布局：

<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>

Answer 1

您可以disabled借助模板引用变量将文本输入的属性绑定到复选框状态。为了使绑定起作用，该ngModel指令还应该应用于复选框。

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

请参阅此 stackblitz的演示。