Bagaimana menemukan kontrol yang tidak valid dalam bentuk reaktif sudut 4

Saya memiliki bentuk reaktif di Angular seperti di bawah ini:

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 mengembalikan false, tetapi semuanya terlihat bagus.

Saya telah mencoba untuk menemukan dengan memeriksa properti status di koleksi kontrol. Tetapi saya bertanya-tanya apakah ada cara untuk menemukan yang tidak valid dan menampilkannya kepada pengguna?

Anda cukup mengulang setiap kontrol dan memeriksa status:

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

Saya baru saja mengatasi masalah ini: Setiap bidang formulir valid, tetapi formulir itu sendiri tidak valid.

Ternyata saya telah menetapkan 'Validator.required' pada FormArray di mana kontrol ditambahkan / dihapus secara dinamis. Jadi meskipun FormArray kosong, itu tetap diperlukan dan oleh karena itu formulir selalu tidak valid, bahkan jika setiap kontrol yang terlihat telah diisi dengan benar.

Saya tidak menemukan bagian yang tidak valid dari formulir, karena fungsi 'findInvalidControls' saya hanya memeriksa FormControl dan bukan FormGroup / FormArray. Jadi saya memperbaruinya sedikit:

/* 
   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;
  }

Kontrol Angular yang tidak valid memiliki kelas CSS bernama 'ng-invalid' .

Di bawah DevTools di Chrome, pilih tab Console.

Dalam perintah tipe prompt konsol:

document.getElementsByClassName('ng-invalid')

Outputnya harus seperti ini:

Dalam kasus ini, teks yang digarisbawahi adalah untuk kontrol formulir listen-address. Dan teks yang dilingkari: .ng-invalidmenunjukkan bahwa kontrol tidak valid.

Catatan: Diuji di chrome

Baik bentuk dan semua kontrol Anda memperluas kelas sudut AbstractControl. Setiap implementasi memiliki aksesor ke kesalahan validasi.

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

Dokumen api berisi semua referensi https://angular.io/api/forms/AbstractControl

Sunting

Saya pikir aksesor kesalahan bekerja seperti ini namun tautan ke github ini menunjukkan bahwa ada beberapa orang lain yang berpikiran sama seperti yang saya lakukan https://github.com/angular/angular/issues/11530

Bagaimanapun, dengan menggunakan pengakses kontrol Anda dapat mengulangi semua formControls di formulir Anda.

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
     })

Sekarang, di angular 9, Anda bisa menggunakan metode markAllAsTouched () untuk menampilkan validator kontrol yang tidak valid:

this.AddCustomerForm.markAllAsTouched();

Jika Anda tidak memiliki banyak bidang dalam formulir, cukup F12 dan arahkan kursor ke kontrol, Anda akan dapat melihat munculan dengan nilai murni / tersentuh / valid bidang- "# fieldname.form-control.ng- untouched.ng-invalid ".

Saya pikir Anda harus mencoba menggunakan this.form.updateValueAndValidity()atau mencoba menjalankan metode yang sama di setiap kontrol.

coba ini

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

Ini akan mencatat semua nama kontrol 😊

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

Anda dapat membuat array atau string dari ini dan menampilkannya kepada pengguna

Saya mengambil kebebasan untuk meningkatkan kode AngularInDepth.com -s, sehingga secara rekursif mencari input yang tidak valid dalam bentuk bersarang juga. Apakah itu disarangkan oleh FormArray-s atau FormGroup-s. Cukup masukkan formGroup tingkat atas dan itu akan mengembalikan semua FormControls yang tidak valid.

Anda mungkin dapat menepis beberapa pemeriksaan jenis "instanceof", jika Anda akan memisahkan pemeriksaan FormControl dan menambahkan fungsi array yang tidak valid ke dalam fungsi terpisah. Ini akan membuat fungsi terlihat jauh lebih bersih, tetapi saya membutuhkan opsi global, fungsi tunggal, untuk mendapatkan array datar dari semua formControls yang tidak valid dan inilah solusinya!

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;
}

Hanya untuk yang membutuhkan, jadi mereka tidak perlu mengkodekannya sendiri ..

Edit # 1

Itu diminta agar juga mengembalikan FormArray-s dan FormGroups yang tidak valid, jadi jika Anda membutuhkannya juga, gunakan kode ini

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;
}

Anda dapat mencatat nilai formulir console.log(this.addCustomerForm.value), itu akan menghibur semua nilai kontrol kemudian null atau bidang "" (kosong) menunjukkan kontrol tidak valid

Jika Anda ingin memeriksa apakah formulir tersebut valid atau tidak, dan tidak ingin membuat perubahan kode apa pun, Anda dapat mencoba menjalankan perintah berikut di Konsol Alat Pengembang Chrome. Pastikan aplikasi angular Anda menampilkan komponen yang menghosting formulir yang dimaksud.

ng.probe(document.querySelector("app-your-component-selector-name")).componentInstance;

Jangan lupa untuk mengganti nama pemilih komponen Anda pada perintah di atas.

Perintah ini akan mencantumkan semua variabel dari komponen Anda termasuk AddCustomerForm. Sekarang jika Anda memperluas ini, Anda akan melihat daftar semua kontrol Anda. Anda kemudian dapat memperluas setiap kontrol untuk memeriksa apakah itu valid atau tidak.

Periksa nilai kontrol bentuk kosong atau nol di halaman html