Проблема с проверкой угловой формы после слишком большого удаления полей

Question

Итак, у меня есть компонент, в который я динамически добавляю драйверы.И пользователь может добавить столько драйверов, сколько пожелает.Проблема в том, что слишком много было добавлено, и пользователь удаляет некоторые драйверы.

Форма не забывает все поля, которые могут показаться, даже если эти входные данные были удалены.То есть объект драйвера был удален из массива.Форма остается недействительной, потому что следующая кнопка остается отключенной.Я сократил код настолько, насколько мог, это был подход, который я использовал.

<button type="button" (click)="addDriver()">
        Add driver
</button>

<form #form="ngForm" class="topMargin">
    
        <div *ngFor="let driver of drivers; let driverIndex = index">
            <div class="header field-desc" >
                <div class="field-title title">
                    Tittle......
                </div>
                <div class="actions">
                    <button class="btn btn-secondary error"
                            (click)="deleteDriver( driver, driverIndex ); $event.stopPropagation()"
                            *ngIf="drivers.length > 1 && !driver.driverIsContractor">
                        <span class="pic-icon pic-delete"></span>
                    </button>
                </div>
            </div>
            <div>
                     <input type="text"  id="driverSurname{{driverIndex}}"                 
                     name="driverSurname{{driverIndex}}" [(ngModel)]="driver.name" required>
                    ...... input fields 
            </div>
        </div>
</form>

Answer 1

Вы можете использовать реактивные формы вместо шаблонных форм.Реактивные формы настроены для обработки нескольких динамических полей.

У меня есть полный рабочий пример: https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final

Например, вот один, который я сделал для нескольких адресов:

    <div formArrayName="addresses"
         *ngFor="let address of addresses.controls; let i=index">

      <div [formGroupName]="i">
        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label"
                 attr.for="{{'street1Id' + i}}">Street Address 1</label>
          <div class="col-md-8">
            <input class="form-control"
                   id="{{'street1Id' + i}}"
                   type="text"
                   placeholder="Street address (required)"
                   formControlName="street1"
                   [ngClass]="{'is-invalid': (address.controls.street1.touched || 
                                              address.controls.street1.dirty) && 
                                              !address.controls.street1.valid }">
            <span class="invalid-feedback">
              <span *ngIf="address.controls.street1.errors?.required">
                Please enter your street address.
              </span>
            </span>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label"
                 attr.for="{{'street2Id' + i}}">Street Address 2</label>
          <div class="col-md-8">
            <input class="form-control"
                   id="{{'street2Id' + i}}"
                   type="text"
                   placeholder="Street address (second line)"
                   formControlName="street2">
          </div>
        </div>

        </div>
      </div>
    </div>

    <div class="form-group row mb-2">
      <div class="col-md-4">
        <button class="btn btn-outline-primary"
                type="button"
                [title]="addresses.valid ? 'Add another mailing address' : 'Disabled until the existing address data is valid'"
                [disabled]="!addresses.valid"
                (click)="addAddress()">
          Add Another Address
        </button>
      </div>
    </div>
  </div>