Як знайти недопустимі елементи керування у кутовій 4 реактивній формі

У мене реактивна форма в Angular, як показано нижче:

this.AddCustomerForm = this.formBuilder.group({
    Firstname: ['', Validators.required],
    Lastname: ['', Validators.required],
    Email: ['', Validators.required, Validators.pattern(this.EMAIL_REGEX)],
    Picture: [''],
    Username: ['', Validators.required],
    Password: ['', Validators.required],
    Address: ['', Validators.required],
    Postcode: ['', Validators.required],
    City: ['', Validators.required],
    Country: ['', Validators.required]
});

createCustomer(currentCustomer: Customer) 
{
    if (!this.AddCustomerForm.valid)
    {
        //some app logic
    }
}

this.AddCustomerForm.valid повертає false, але все виглядає добре.

Я намагався знайти за допомогою перевірки властивості статусу в колекції елементів керування. Але цікаво, чи є спосіб знайти недійсні та показати їх користувачеві?

Ви можете просто переглядати кожен елемент керування та перевіряти статус:

public findInvalidControls() {
    const invalid = [];
    const controls = this.AddCustomerForm.controls;
    for (const name in controls) {
        if (controls[name].invalid) {
            invalid.push(name);
        }
    }
    return invalid;
}

Я щойно вирішив цю проблему: кожне поле форми є дійсним, але все-таки сама форма недійсна.

Виявляється, я встановив 'Validator.required' на FormArray, де елементи керування додаються / видаляються динамічно. Отже, навіть якщо FormArray був порожнім, він все одно був необхідним, а тому форма завжди була недійсною, навіть якщо кожен видимий елемент керування був правильно заповнений.

Я не знайшов недійсну частину форми, оскільки моя функція 'findInvalidControls' перевіряла лише FormControl, а не FormGroup / FormArray. Тож я трохи оновив:

/* 
   Returns an array of invalid control/group names, or a zero-length array if 
   no invalid controls/groups where found 
*/
public findInvalidControlsRecursive(formToInvestigate:FormGroup|FormArray):string[] {
    var invalidControls:string[] = [];
    let recursiveFunc = (form:FormGroup|FormArray) => {
      Object.keys(form.controls).forEach(field => { 
        const control = form.get(field);
        if (control.invalid) invalidControls.push(field);
        if (control instanceof FormGroup) {
          recursiveFunc(control);
        } else if (control instanceof FormArray) {
          recursiveFunc(control);
        }        
      });
    }
    recursiveFunc(formToInvestigate);
    return invalidControls;
  }

У розділі DevTools у Chrome виберіть вкладку Консоль.

У командному рядку командного типу:

document.getElementsByClassName('ng-invalid')

Вихід повинен бути подібним до цього:

У цьому випадку підкреслений текст призначений для контролю форми listen-address. І обведений текст: .ng-invalidвказує на те, що елемент керування недійсний.

Примітка: Випробувано хромом

Як форми, так і всі елементи керування розширюють кутовий клас AbstractControl. Кожна реалізація має доступ до помилок перевірки.

let errors = this.AddCustomerForm.errors
// errors is an instance of ValidatorErrors

Документи api містять усі посилання https://angular.io/api/forms/AbstractControl

Редагувати

Я думав, що програма доступу до помилок працювала таким чином, однак це посилання на github показує, що є деякі інші люди, які думали так само, як і я https://github.com/angular/angular/issues/11530

У будь-якому випадку, використовуючи доступ до елементів керування, ви можете переглядати всі formControls у вашій формі.

Object.keys(this.AddCustomerForm.controls)
    .forEach( control => {
        //check each control here
        // if the child is a formGroup or a formArray
        // you may cast it and check it's subcontrols too
     })

Тепер, в кутовій 9, ви можете використовувати метод markAllAsTouched (), щоб показати недійсні валідатори елементів керування:

this.AddCustomerForm.markAllAsTouched();

Якщо у вас не так багато полів у формі, ви можете просто натиснути F12 і навести курсор на елемент керування, і ви зможете побачити спливаюче вікно із первинними / торкнутимися / дійсними значеннями поля - "# fieldname.form-control.ng- недоторканий.ng-недійсний ".

Я думаю, вам слід спробувати використовувати this.form.updateValueAndValidity()або спробувати виконати той самий метод у кожному з елементів керування.

спробуйте це

 findInvalidControls(f: FormGroup) {
    const invalid = [];
    const controls = f.controls;
    for (const name in controls) {
      if (controls[name].invalid) {
        invalid.push(name);
      }
    }
    return invalid;
  }

Буде записано всі імена елементів керування 😊

for (let el in this.ReactiveForm.controls) {
      if (this.ReactiveForm.controls[el].errors) {
        console.log(el)
      }
 }          

Ви можете створити з цього масив або рядок і показати користувачеві

Я дозволив собі вдосконалити код AngularInDepth.com -s, щоб він також рекурсивно шукав недійсні введення у вкладених формах. Чи буде він вкладений у FormArray-s або FormGroup-s. Просто введіть форму GroupGroup верхнього рівня, і вона поверне всі недійсні формиControls.

Ви можете скинути деякі перевірки типу "instanceof", якщо б ви розділили перевірку FormControl та додавання до недійсних функцій масиву в окрему функцію. Це зробило б функцію набагато чистішою, але мені потрібна була глобальна, одна функція, опція, щоб отримати плоский масив усіх недійсних формControls, і це рішення!

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        switch( control.constructor.name )
        {
            case 'AbstractControl':
            case 'FormControl':
                if (control.invalid) _invalidControls.push( control );
                break;

            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

Тільки для тих, хто цього потребує, тому їм не потрібно кодувати це самостійно ..

Редагувати No1

Було запропоновано також повернути недійсні FormArray-s та FormGroups, тому, якщо вам це також потрібно, використовуйте цей код

findInvalidControls( _input: AbstractControl, _invalidControls: AbstractControl[] ): AbstractControl[] {
    if ( ! _invalidControls ) _invalidControls = [];
    if ( _input instanceof FormControl  ) {
        if ( _input.invalid ) _invalidControls.push( _input );
        return _invalidControls;
    }

    if ( ! (_input instanceof FormArray) && ! (_input instanceof FormGroup) ) return _invalidControls;

    const controls = _input.controls;
    for (const name in controls) {
        let control = controls[name];
        if (control.invalid) _invalidControls.push( control );
        switch( control.constructor.name )
        {    
            case 'FormArray':
                (<FormArray> control ).controls.forEach( _control => _invalidControls = findInvalidControls( _control, _invalidControls ) );
                break;

            case 'FormGroup':
                _invalidControls = findInvalidControls( control, _invalidControls );
                break;
        }
    }

    return _invalidControls;
}

Ви можете реєструвати значення форми console.log(this.addCustomerForm.value), воно буде консолірувати всі значення елемента керування, тоді значення null або "" (порожні) означатимуть недійсні елементи керування