Реактивные формы динамических столбцов в угловых

Question

Как я могу добавить несколько столбцов, если я добавлю «нажмите здесь, чтобы добавить поле для перевозки», как я хочу добавить водителя, контактный номер и т. Д .... После того, как вы нажмете модальное, он покажет вам некоторые параметры в каком поледобавить.Пожалуйста, проверьте кодовую ссылку, которую я сделал.Вот также мои коды ниже.Пожалуйста, проверьте также изображение здесь

ПРОВЕРЬТЕ ЭТУ ССЫЛКУ https://stackblitz.com/edit/dynamic-columns-reactive-forms-hj5nur?file=app/app.component.ts

openModal(template: TemplateRef < any > ) {
  this.modalRef = this.modalService.show(template);
}

initGroup() {
  let rows = this.addForm.get('rows') as FormArray;
  rows.push(this.fb.group({
    description: [null, Validators.required],
    pickup_area: [null, Validators.required],
    pickup_time: [null, Validators.required],
    sign_board: [null, Validators.required],
    driver: [null],
    contact_number: [null],
    transportation_unit: [null],
    special_instructions: [null],
  }))
}

Answer 1

Вот отредактированный стек: https://stackblitz.com/edit/dynamic-columns-reactive-forms-d3xsnf?file=app%2Fapp.component.html

эта ссылка также содержит проверку:

https://stackblitz.com/edit/dynamic-columns-reactive-forms-ytiiqp?file=app/custom-required-validator.ts

Answer 2

Вам нужно будет создать новый FormGroup для модальных полей, а затем использовать value этой формы, чтобы показать или скрыть эти конкретные поля из основного form

Кроме того, так как вы 'если вы уже создаете эти поля в основной форме, но присваиваете им undefined, не имеет значения, присутствуют ли они в форме или нет, если значение формы - это все, что вам нужно.

эти шаги позволят решить вашу проблему:

Первый: Создать новую группу FormGroup для вашего модального

this.fieldSelectionForm = this.fb.group({
  driver: [true],
  contact_number: [true],
  transportation_unit: [true],
  special_instructions: [true]
});

Второй: Создать переменную накласс для настройки того, что должно быть видно / скрыто из основной формы:

formControlsVisibilityConfig;

Третий: Считать значение модальной формы в ее представлении и присвоить его formControlsVisibilityConfig.Кроме того, скрыть модальные:

onFormSubmit() {
  console.log(this.fieldSelectionForm.value);
  this.formControlsVisibilityConfig = this.fieldSelectionForm.value
  this.modalRef.hide();
}

Четвертый: Привязать форму к шаблону:

<h3>Transportation
    <button type="button" (click)="openModal(add)"> Click Here to add Transportation Fields</button>
</h3>
<br>
<form [formGroup]="addForm">
    <div formArrayName="rows">
        <table>
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Pick Up Area</th>
                    <th>Pick Up Time</th>
                    <th>Sign Board</th>
          <th *ngIf="formControlsVisibilityConfig?.driver">Driver</th>
                    <th *ngIf="formControlsVisibilityConfig?.contact_number">Contact Number</th>
                    <th *ngIf="formControlsVisibilityConfig?.transportation_unit">Transportation Unit</th>
                    <th *ngIf="formControlsVisibilityConfig?.special_instructions">Special Instructions</th>
                    <th>Action</th>

                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let row of addForm.controls.rows.controls; let i = index" [formGroupName]="i">
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <textarea class="form-control" formControlName="description"></textarea>
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="pickup_area">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="pickup_time">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="sign_board">
                            </div>
                        </div>
                    </td>

                    <td *ngIf="formControlsVisibilityConfig?.driver">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="driver">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.contact_number">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="contact_number">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.transportation_unit">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="transportation_unit">
                            </div>
                        </div>
                    </td>
                    <td *ngIf="formControlsVisibilityConfig?.special_instructions">
                        <div class="form-group row">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" formControlName="special_instructions">
                            </div>
                        </div>
                    </td>
                    <td>
                        <button type="button" 
              class="btn btn-square btn-danger btn-sm waves-effect waves-light" 
              (click)="onDeleteRow(i)"><i class="icofont icofont-ui-delete"></i> Remove
            </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button type="button" (click)="initGroup()"> Add Row</button>
    </div>
</form>



<ng-template #add>
    <div role="dialog" aria-hidden="true">
        <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
        <div class="login-card-modal">
            <form 
        class="md-float-material" 
        [formGroup]="fieldSelectionForm"
        (submit)="onFormSubmit()">
                <div class="auth-box">
                    <div class="row m-b-0">
                        <div class="col-md-12">
                            <h3 class="text-center">Add Fields</h3>
                        </div>
                        <div class="form-group row">
                            Driver
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="driver">
                            </div>
                        </div>
                        <div class="form-group row">
                            Contact number
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="contact_number">
                            </div>
                        </div>
                        <div class="form-group row">
                            Transportation Unit
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="transportation_unit">
                            </div>
                        </div>
                        <div class="form-group row">
                            Special Instructions
                            <div class="col-sm-12">
                                <input type="checkbox" class="form-control" formControlName="special_instructions">
                            </div>
                        </div>
                    </div>
                </div>
        <button type="submit">Submit</button>
            </form>
        </div>
    </div>
</ng-template>

Вот Обновлен StackBlitz для вашей ссылки.