Cách tìm các điều khiển không hợp lệ ở dạng phản ứng góc 4

Tôi có một biểu mẫu phản ứng trong Angular như dưới đây:

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 trả về false, nhưng mọi thứ có vẻ ổn.

Tôi đã cố gắng tìm bằng cách kiểm tra thuộc tính trạng thái trong bộ sưu tập điều khiển. Nhưng tôi tự hỏi liệu có cách nào để tìm những cái không hợp lệ và hiển thị cho người dùng không?

Bạn có thể chỉ cần lặp lại mọi điều khiển và kiểm tra trạng thái:

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

Tôi vừa đấu tranh với vấn đề này: Mọi trường biểu mẫu đều hợp lệ, nhưng bản thân biểu mẫu vẫn không hợp lệ.

Hóa ra rằng tôi đã đặt 'Validator.required' trên FormArray nơi các điều khiển được thêm / xóa động. Vì vậy, ngay cả khi FormArray trống, nó vẫn được yêu cầu và do đó biểu mẫu luôn không hợp lệ, ngay cả khi mọi điều khiển hiển thị đã được điền chính xác.

Tôi không tìm thấy phần không hợp lệ của biểu mẫu, vì hàm 'findInvalidControls' của tôi chỉ kiểm tra FormControl's chứ không phải FormGroup / FormArray. Vì vậy, tôi đã cập nhật nó một chút:

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

Trong DevTools trong Chrome, chọn tab Bảng điều khiển.

Trong bảng điều khiển, gõ lệnh nhắc:

document.getElementsByClassName('ng-invalid')

Đầu ra phải tương tự như sau:

Trong trường hợp này, văn bản được gạch chân là để kiểm soát biểu mẫu listen-address. Và văn bản bao quanh: .ng-invalidcho biết rằng điều khiển không hợp lệ.

Lưu ý: Đã thử nghiệm trong chrome

Cả biểu mẫu và tất cả các điều khiển của bạn đều mở rộng lớp góc cạnh AbstractControl. Mỗi triển khai có một trình truy cập vào các lỗi xác thực.

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

Tài liệu api chứa tất cả các tham chiếu https://angular.io/api/forms/AbstractControl

Biên tập

Tôi nghĩ rằng trình truy cập lỗi hoạt động theo cách này tuy nhiên liên kết này tới github cho thấy rằng có một số người khác cũng nghĩ như tôi https://github.com/angular/angular/issues/11530

Trong mọi trường hợp, bằng cách sử dụng công cụ truy cập điều khiển, bạn có thể lặp lại tất cả các formControls trong biểu mẫu của mình.

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

Bây giờ, trong góc 9, bạn có thể sử dụng phương thức markAllAsTouched () để hiển thị các trình xác thực điều khiển không hợp lệ:

this.AddCustomerForm.markAllAsTouched();

Nếu bạn không có nhiều trường trong biểu mẫu, bạn có thể chỉ cần F12 và di chuột qua điều khiển, bạn sẽ có thể thấy cửa sổ bật lên với các giá trị nguyên sơ / chạm / hợp lệ của trường- "# fieldname.form-control.ng- không bị ảnh hưởng.ng-không hợp lệ ".

Tôi nghĩ bạn nên thử sử dụng this.form.updateValueAndValidity()hoặc thử thực hiện cùng một phương pháp đó trong mỗi điều khiển.

thử đi

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

Thao tác này sẽ ghi lại tất cả tên của các điều khiển 😊

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

bạn có thể tạo một mảng hoặc chuỗi từ này và hiển thị cho người dùng

Tôi đã tự do cải thiện mã AngularInDepth.com -s, để nó cũng tìm kiếm đệ quy các đầu vào không hợp lệ trong các biểu mẫu lồng nhau. Chung nó được lồng vào nhau bởi FormArray-s hoặc FormGroup-s. Chỉ cần nhập formGroup cấp cao nhất và nó sẽ trả về tất cả các FormControl không hợp lệ.

Bạn có thể bỏ qua một số kiểm tra kiểu "instanceof", nếu bạn muốn tách kiểm tra FormControl và bổ sung chức năng mảng không hợp lệ thành một chức năng riêng biệt. Điều này sẽ làm cho hàm trông gọn gàng hơn rất nhiều, nhưng tôi cần một tùy chọn toàn cục, một hàm, để có được một mảng phẳng gồm tất cả các formControl không hợp lệ và đây là giải pháp!

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

Chỉ dành cho những người cần nó, vì vậy họ không phải tự mã hóa nó ..

Chỉnh sửa # 1

Nó đã được yêu cầu rằng nó cũng trả về FormArray-s và FormGroups không hợp lệ, vì vậy nếu bạn cũng cần điều đó, hãy sử dụng mã này

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

bạn có thể ghi giá trị của biểu mẫu console.log(this.addCustomerForm.value), nó sẽ điều khiển tất cả giá trị của điều khiển sau đó các trường null hoặc "" (trống) cho biết điều khiển không hợp lệ