Angular6：如何將邊框顏色添加到復選框

Question

我試圖在未選中的情況下為復選框添加邊框紅色，但不起作用。 它基於.ng-touched.ng-無效的此類名稱。 如果未從復選框中選擇它，則它應為邊框紅色。 現在該框將要使用紅色，但是我需要復選框邊框僅在未檢查條件下為紅色。 怎么做？

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>

Answer 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 }
    ];
  }

在這里完成工作堆疊閃電戰