How to validate an editableContent td in angular?

Question

I want to validate my td in my angular application on my editable Table just like a form input something like with [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>

How can I achieve this. Is there any way good way to do it?

Answer 1

I suggest using Reactive Forms approach for this. You can create a FormGroup with a FormArray in it. This FormArray will have the same number of FormGroup that you have in your lists_arr.

With that in place, you can apply Validators.Required while creating the FormControl for the list_serial_no attribute.

This will give you a flexibility to to apply validations on your FormControls.

---

Here's a Working Sample StackBlitz that implements something along the lines of it to give you some ref.