web-dev-qa-db-ja.com

Angular2-チェックボックスがチェックされないようにする

行ごとにチェックボックスを含むテーブルがあります。テーブルヘッダーには、すべてのテーブル行ボックスを切り替えるCheck Allチェックボックスがあります。

チェックボックスの数が特定の制限を超える場合、エラーを表示し、テーブル行のチェックボックスを切り替えないようにするロジックを実装しようとしていますOR checkallボックス自体。

checkAllを返しているのに、falseボックスをオンにできるという問題があります。バインディングに問題がありますか？

HTML：

<input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)">

コンポーネント：

toggleAllEmployees(flag) {

    const temp = [];

    if (flag) {

        // If selecting all of these passes the max, throw an error
        if (this.importResults.length > this.maxSelection) {

            /* This is where I get to when I display the error message */
            alert('The number of employees you are trying to select (' + this.importResults.length + ') exceeds the max limit.');
            return false;

        } else {
            for (let i = 0; i < this.importResults.length; i++) {
                if (this.importResults[i].OnTempAssignment !== 'True') {
                    this.importResults[i].checked = true;
                    temp.Push(this.importResults[i]);
                }
            }
            this.employeeSelection = temp;

            // Emit our changes
            this.selectedEmployees.emit(this.employeeSelection);

        }
    } else {
        //The else statement just un-checks all the boxes.
    }
}

テーブル行のチェックボックスはどれもチェックされておらず、エラーは適切に表示されますが、クリックしているボックスは引き続き切り替えられます。

return false;がそれを防いだと思いましたが、そうではないと思います。とにかくそれを切り替えることができる私のバインディングに何か問題がありますか？

javascriptangulartypescriptangular2-ngmodel
7
SBB

ngModelChangeは、チェックボックスにバインドされた値が変更されたときに発生します。トグル操作の停止が遅れています。

ここでは、clickイベントにバインドする必要があります。次に、$event.preventDefault()を使用して、チェックボックスの切り替えを停止できます。

$event.preventDefault()の前にロジックをイベントで追加して、チェックボックスがステータスの変更を防ぐ必要があるかどうかを判断できます。

プランカーデモを参照してください。

19
Pengyy