Angular6：如何为复选框添加边框颜色答案

【问题标题】：Angular6: How to add border color to checkboxAngular6：如何为复选框添加边框颜色
【发布时间】：2020-01-14 15:59:11
【问题描述】：

我正在尝试在复选框的未选中条件上添加边框红色但不起作用。它基于 .ng-touched.ng-invalid 这个类名。如果未从复选框中选择，则应为红色边框。现在该框将变为红色，但我需要复选框边框仅在未选中条件下为红色。怎么做？

https://stackblitz.com/edit/angular-q7aiwj?file=src/app/app.component.html

app.component.html：

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <input type="checkbox" [formControlName]="i">
    {{ordersData[i].name}}
  </label>

  <div *ngIf="!form.valid">At least one order must be selected</div>
  <br>
  <button type="submit">submit</button>
</form>

【问题讨论】：

HTML 不允许更改复选框的边框颜色，因为您需要使用轮廓或自定义复选框

标签： css angular typescript angular6 angular7

【解决方案1】：

您需要做一些事情来完成这项工作......

记录输入在某处检查...例如在ordersData 数组中
使用[checked]="ordersData[i].checked" 将输入与此属性绑定并记录任何更改，我们这样做：[(ngModel)]="ordersData[i].checked"
接下来，要设置行的样式，我们添加一个 div 并给它一个 [style.border]，条件是如果为 false/未选中，则显示一个红色框

相关HTML：

<form [formGroup]="form" (ngSubmit)="submit()">
  <label formArrayName="orders" *ngFor="let order of form.controls.orders.controls; let i = index">
    <div   [style.border]="ordersData[i].checked == false ? '2px solid red' : 'none' "
  >
    <input type="checkbox" [formControlName]="i" [checked]="ordersData[i].checked" [(ngModel)]="ordersData[i].checked"  
    >
    {{i}} -  {{ordersData[i].name}}
  </div>

  </label>

  <div *ngIf="!form.valid">At least one order must be selected</div>
  <br>
  <button type="submit">submit</button>
</form>

TS的相关变化：

  getOrders() {
    return [
      { id: 100, name: 'order 1', checked:false },
      { id: 200, name: 'order 2', checked:false },
      { id: 300, name: 'order 3', checked:false },
      { id: 400, name: 'order 4', checked:false }
    ];
  }

填写working stackblitz here

【讨论】：