css - Angular6:如何为复选框添加边框颜色

Question

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

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

应用程序组件.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>

Answer 1

你需要做一些事情来完成这件事......

• 记录在某处检查过的输入...比如在 ordersData 数组中
• 使用 [checked]="ordersData[i].checked" 将输入与此属性绑定(bind)并记录任何更改，我们这样做:[(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