Angular 2在允许复选框之前验证数据答案

【问题标题】：Angular 2 verify data before allowing checkboxAngular 2在允许复选框之前验证数据
【发布时间】：2017-05-14 02:59:09
【问题描述】：

我有一个带有复选框的表单，供管理员编辑用户。用户对象有一个布尔对象isAdmin。我想阻止用户修改自己的帐户，但仍允许他们查看值，但无论我做什么，我都无法阻止复选框选中。数据未（正确）提交，因此刷新页面有效，但我正在尝试利用双向绑定。

我的组件方法：

updateUser(event, key, user) {
  if (user.$key !== this.currentUserId) {
    console.log('updating');
    this.loginService.updateUser(user.$key, key, event.checked);
  } else {
    // somehow don't allow the checking of the box?
  }
}

我的html：

<md-card class="responsive-card">
    <md-card *ngFor="let user of (users$ | async)">
        <md-card-content>
          <!-- checkbox here -->
        </md-card-content>
    </md-card>
</md-card>

尝试 1：

<md-checkbox [(ngModel)]="user.isAdmin" name="isAdmin" (change)="updateUser($event, 'isAdmin', user)" #isAdmin>
        Admin
</md-checkbox>

尝试2（我想，也许只是一种方式绑定？）：

<md-checkbox [ngModel]="user.isAdmin" name="isAdmin" (change)="updateUser($event, 'isAdmin', user)">
        Admin
</md-checkbox>

尝试 3（绑定到选中的属性？）：

<md-checkbox [attr.checked]="user.isAdmin" name="isAdmin" (change)="updateUser($event, 'isAdmin', user)">
        Admin
</md-checkbox>

问题的可视化 gif（顶级用户不应允许我修改它）：

【问题讨论】：

我在输入中添加了[disabled]="isCurrentUser(user.$key)"...这可能是最好的方法，但我想我想知道在允许复选框检查自身之前如何检查某些内容。
看看这篇文章是否有帮助。 stackoverflow.com/questions/43851705/…
这是另一种选择，但点击似乎也出现在禁用的元素上。
不，禁用复选框时不会发生单击事件。
点击似乎即使在禁用时也会触发。我的新想法是以某种方式使用 promise 和 view child

标签： javascript angular checkbox

【解决方案1】：

您应该使用checked 属性绑定而不是attr.checked。此外，您的 isAdmin 应该没有引号

<md-checkbox [checked]="user.isAdmin" name="isAdmin" (change)="updateUser($event, isAdmin, user)">
        Admin
</md-checkbox>

【讨论】：

首先，不应该。也许不是最好的方法，但由于我将这种方法用于verified 元素，我需要区分两者。该方法工作正常，但检查不反映模型。其次，这个解决方案不起作用。
你能创建一个 plunker 来重现相同的内容吗？
我会尝试...我不擅长使用 plunker。

【解决方案2】：

我认为你必须使用[checked] = "user.isAdmin" 而不是[attr.checked]，即

<md-checkbox [checked] = "user.isAdmin" name = "isAdmin" (change) = "updateUser($event, 'isAdmin', user)">
   Admin
</md-checkbox>

【讨论】：

您的回答对 Aravind 没有任何帮助，也不起作用。