Angular: Как объявить пустой массив форм с помощью formbuilder и поля ошибки установки - PullRequest
Новая
       34

Angular: Как объявить пустой массив форм с помощью formbuilder и поля ошибки установки

0 голосов
/ 26 сентября 2019

РЕШЕНИЕ: 

get operatingRangesFormArray(): FormArray { return this.modifyForm.get('operatingRanges') as FormArray; }

this.submitForm = this._fb.group({
      'checkboxGroup': this._fb.array([], [CustomValidator]) // [] to declare empty form array
    });

<div *ngIf="!operatingRangesFormArray.valid">Au moins une gamme opératoire doit être sélectionné</div>

Я застрял с этим, я просто создаю вложенные формы и элементы управления с помощью formbuilder.Все элементы управления и formArrays пусты при запуске.

Но когда я пытаюсь вставить какой-то элемент управления в formArray, он получается с помощью formarray, содержащего флажок 6, который я хочу -so control qith false или true), но этосодержит также один пустой элемент управления и один formarray с именем validator.

EDIT: теперь я удалил деталь с '' в функции createForm, которая была this.formBuilder.array (['', customValidator]) и теперь только([customValidator]). 

value: Array(7)
0: (formArray) => {…}
    arguments: (...)
    caller: (...)
    length: 1
    name: "validator"
    __proto__: ƒ ()
    [[FunctionLocation]]: modify-maincourante.component.ts:505
    [[Scopes]]: Scopes[3]
    0: Closure (minSelectedCheckboxes)
        min: 1
    1: Closure (./src/app/modify-maincourante/modify-maincourante.component.ts)
        ModifyMaincouranteComponent: class ModifyMaincouranteComponent
        moment__WEBPACK_IMPORTED_MODULE_7__: ƒ hooks()
        rxjs__WEBPACK_IMPORTED_MODULE_8__: Module {…}
        _angular_forms__WEBPACK_IMPORTED_MODULE_4__: Module {…}
        _angular_material__WEBPACK_IMPORTED_MODULE_5__: Module {…}
        _angular_router__WEBPACK_IMPORTED_MODULE_2__: Module {…}
        _services__WEBPACK_IMPORTED_MODULE_3__: Module {__esModule: true, …}
     2: Global {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

Поэтому я решил очистить () мой formArray, прежде чем динамически добавлять 6 элементов управления, и он нарушает пользовательский валидатор minSelectedCheckboxes (1) ...

Пожалуйстакто-то знает, это нормальное поведение formarray, когда inits?Вот как я запускаю форму: 

this.modifyForm = this.formBuilder.group({
        dateDeb: ['', Validators.required],
        dateFin: ['', Validators.required],
        workTypeControl: ['', Validators.required],
        description: ['', Validators.required],
        note: [''],
        agentsInShiftSelected: this.formBuilder.array(['', this.minSelectedCheckboxes(1)]),
        agentsDispo: this.formBuilder.array(['', this.minSelectedCheckboxes(1)]),
        agentParticipantsControl: ['', Validators.required],
        externalActorControl: [''],
        externalActorParticipantsControl: [''],
        shiftControl: ['', Validators.required],
        operatingRanges: this.formBuilder.array(['', this.minSelectedCheckboxes(1)]),
        equipmentLocationForm: this.formBuilder.group( {
            equipmentLocationWorkFieldControl: [''],
            equipmentLocationStructureControl: [''],
            equipmentLocationLocalControl: [''],
            equipmentLocationPlaceControl: [''],
            equipmentLocationEquipmentTypeControl: [''],
            equipmentLocationEquipmentControl: [''],
            equipmentNameControl: [''],
            equipmentLocationEquipmentTypeNewControl: [''],
            equipmentLocationEquipmentTypeNew2Control: [''],
            equipmentSurnameControl: [''],
            equipmentSerialControl: [''],
            equipmentLocationBrandControl: [''],
            equipmentLocationModelControl: [''],
            equipmentLocationWorkFieldNewControl: [''],
            equipmentLocationEquipmentSelectedControl: [''],
            equipmentSelectedControl: [''],
            equipmentSelectedIdControl: [''],
            equipmentControl: ['', Validators.required],
        })
    });

Когда я переходил от нормальных форм к реактивным, это ломает многие вещи, и я пытался это исправить.Теперь мой пользовательский валидатор не работал и отлично работал раньше. 

get operatingRangesFormArray(): FormArray { return this.modifyForm.get('operatingRanges') as FormArray; }

<div formArrayName="operatingRanges" *ngFor="let item of this.operatingRangesFormArray.controls; let i = index">
    <div class="row-no-wrap" *ngIf="i < (operating_ranges.length - 1)/2">
        <label>
            <mat-checkbox [value]="operating_ranges[i]?.id" [formControlName]="i" style="margin-right: 5px;" (change)="updateDureeTotaleOperatingRanges($event)">
                                    {{operating_ranges[i]?.name}}
            </mat-checkbox>
        </label>
    </div>
    <div *ngIf="item.invalid">Au moins une gamme opératoire doit être sélectionné</div>
</div>



minSelectedCheckboxes(min = 1) {
    const validator: ValidatorFn = (formArray: FormArray) => {
        const totalSelected = formArray.controls
            .map(control => control.value)
            .reduce((prev, next) => next ? prev + next : prev, 0);
        return totalSelected >= min ? null : { required: true };
    };
    return validator;
}

И функция, которая выдвигает элементы управления в formarray: 

setOperatingRangeSelectedAndTime() {
    console.log(this.operatingRangesFormArray);
    this.operatingRangesFormArray.clear();
    this.operating_ranges.forEach((item) => {
        this.operating_range_dos.forEach((itemDo) => {
            if (itemDo.operating_range.id === item.id) {
                const control = new FormControl(true);
                (this.modifyForm.controls.operatingRanges as FormArray).push(control);
                this.operating_range_dos_modified.push(
                    {
                        id: null,
                        operating_range: null,
                        intervention: null,
                        operating_range_id: itemDo.operating_range.id,
                        intervention_id: this.maincourante_id,
                        duration: itemDo.duration
                    });
            } else {
                const control = new FormControl(false);
                (this.modifyForm.controls.operatingRanges as FormArray).push(control);
            }
        });
    });
    this.operating_range_dos.forEach((itemDo) => {
        this.DureeTotale.push(itemDo.duration);
    });
    const sum = this.DureeTotale.reduce((acc, time) => acc.add(moment.duration(time)), moment.duration());
    this.dureeTotaleShown = moment.utc(moment.duration([Math.floor(sum.asHours()), sum.minutes()].join(':'), 'seconds').asMilliseconds()).format('HH:mm');
}
...