如何以角度验证可编辑内容 td？

Question

我想在我的可编辑表格上的 Angular 应用程序中验证我的 td，就像使用 [attr.required] 之类的表单输入一样。

<tr *ngFor='let item of lists_arr; let i=index'>
  <td [attr.contenteditable]="displayingListIndeces[i]"
      [textContent]="lists_arr[i].list_serial_no"
      [attr.required]="true"
      (input)="lists_arr[i].list_serial_no=$event.target.textContent">
   {{item.list_serial_no}}
  </td>
</tr>

我怎样才能做到这一点。有什么好办法吗？

Answer 1

我建议为此使用 Reactive Forms 方法。您可以创建一个FormGroup，其中包含FormArray。此FormArray 将具有与您的lists_arr 中相同数量的FormGroup。

设置好之后，您可以在为list_serial_no 属性创建FormControl 时应用Validators.Required。

这将使您可以灵活地对您的FormControls 应用验证。

---

这是一个Working Sample StackBlitz，它实现了一些类似的东西给你一些参考。