Reactive Form Array - Избегайте ошибок проверки при добавлении новых элементов

Question

У меня есть группа форм, которая состоит из одного массива форм:

    ngOnInit() {
        this.deviceDetailsFormGroup = this._formBuilder.group({
            deviceDetails: this._formBuilder.array([
                this.buildDeviceDetailsForm()
            ])
        });
}

Для каждого элемента управления в массиве форм требуются валидаторы:

buildDeviceDetailsForm(): FormGroup {
    return this._formBuilder.group({
        ipAddressCtrl: [
            "",
            [Validators.pattern(ipaddressPattern), Validators.required]
        ],
        hostnameCtrl: [
            "",
            [
                Validators.required,
                Validators.maxLength(30),
                Validators.minLength(5)
            ]
        ]
    });
}

Ниже приведены мои push иудалить функции из массива форм:

addNewDevice() {
    this.deviceItems = this.deviceDetailsFormGroup.get(
        "deviceDetails"
    ) as FormArray;

    if (this.deviceItems.length > MAX_DEVICES) {
        this.toastNotif.errorToastNotif(
            `A maximum of ${MAX_DEVICES} devices can be selected for a single job scan`,
            "Too many devices selected"
        );
        return;
    }

    if (this.deviceDetailsFormGroup.invalid) {
        return;
    }

    let mapIP = new Map<string, number>();

    // Warn about duplicate IP's in form
    this.deviceItems.controls.forEach(ctrl => {
        if (mapIP[ctrl.value.ipAddressCtrl] === 0) {
            this.toastNotif.warningToastNotif(
                "You have entered duplicate IP's in the form fields",
                "Duplicate" + " IP's"
            );
        }

        mapIP[ctrl.value.ipAddressCtrl] = 0;
    });

    this.deviceItems.push(this.buildDeviceDetailsForm());
}

removeDevice(i: number) {
    this.deviceItems.removeAt(this.deviceItems.length - 1);
}

Когда я помещаю новые элементы в массив форм, они помечаются как недействительные, хотя они нетронуты и нетронуты. Я понимаю, что это вызвано Validators и пустыми значениями по умолчанию, установленными при создании новой FormGroup.

Можно ли избежать такого поведения, чтобы элементы FormArray помечались как ошибки, только если к ним прикасались?

Заранее спасибо.

Answer 1

Лука, formControl в FormArray всегда будет недействительным, поэтому FormArray недействителен, а форма недействительна. Вам нужно проверить, не коснулся ли элемент управления. Простой пример этого стекаблица . Вы видите, что если вы добавите, элемент управления будет недействительным, но не будет затронут*