Как проверить editableContent тд в угловых?

Question

Я хочу проверить мой тд в моем угловом приложении на редактируемой таблице, как при вводе формы, например, с [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 будет иметь то же число FormGroup, что и у вас в lists_arr.

. С этим вы можете применить Validators.Required при создании FormControl для list_serial_no.Атрибут.

Это даст вам возможность применять проверки к вашим FormControl s.

---

Вот вам Рабочий образец StackBlitz , который реализует что-то вроде этого, чтобы дать вам ссылку.