Работа с программно добавленными элементами формы

Я работаю над компонентом, который позволяет пользователю динамически добавлять новый элемент формы. Код доступен здесь и ниже https://stackblitz.com/edit/angular-h3tmfe. У меня есть два вопроса:

1) Как проверить, что элемент формы не пуст перед добавлением новой строки?

2) Как программно получить доступ к значению в элементе формы?

то есть, если вывод {{invoiceForm.value | json}} приведен ниже, как мне получить доступ к «элементу 1»? то есть invoiceForm.itemRows(0).value или что-то в этом роде?

{
  "itemRows": [
    {
      "itemname": "item 1"
    },
    {
      "itemname": "item 2"
    }
  ]
}

app.component.html

<hello name = "{{ name }}"></hello>
    <h3 class = "page-header">Add Invoice</h3>
    <button type = "button" (click) = "addNewRow()" class = "btn btn-primary">Add new Row</button><br>
    <form [formGroup] = "invoiceForm">
      <div formArrayName = "itemRows">
        <div *ngFor = "let itemrow of invoiceForm.controls.itemRows.controls; let i=index"  [formGroupName] = "i">
          <h4>Invoice Row #{{ i + 1 }}</h4>
          <div class = "form-group">
            <label>Item Name</label>
            <input formControlName = "itemname" class = "form-control">
          </div>
          <button *ngIf = "invoiceForm.controls.itemRows.controls.length > 1" (click) = "deleteRow(i)" class = "btn btn-danger">Delete Button</button>
        </div>
      </div>

    </form>
    <pre>{{invoiceForm.value | json}}</pre>

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public invoiceForm: FormGroup;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.invoiceForm = this._fb.group({
      itemRows: this._fb.array([this.initItemRows()])
    });
  }

  get formArr() {
    return this.invoiceForm.get('itemRows') as FormArray;
  }

  initItemRows() {
    return this._fb.group({
      itemname: ['']
    });
  }

  addNewRow() {
    this.formArr.push(this.initItemRows());
  }

  deleteRow(index: number) {
    this.formArr.removeAt(index);
  }
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
78
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете получить доступ к значениям массива формы, используя

this.formArr.value

Чтобы проверить, не пусто ли предыдущее поле

if (this.formArr.value[this.formArr.value.length-1].itemname !== ""){
  this.formArr.push(this.initItemRows());
} else {
  //display warning
}  

Этот фрагмент кода поможет вам проверить, действительна ли форма перед добавлением/нажатием новой строки.

 addNewRow() {
    this.isClicked = true;
    const itemFormCtrl = this.invoiceForm.controls['itemRows'];
    if (itemFormCtrl.valid) {
      this.formArr.push(this.initItemRows());
      this.isClicked = false;
    }
  }

Вот обновленный StackBlitz

Другие вопросы по теме