[angular] 각도 4 반응 형식에서 잘못된 컨트롤을 찾는 방법

Program / 글쓴이

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

답변

방금이 문제에 맞서 싸웠습니다. 모든 양식 필드는 유효하지만 양식 자체는 여전히 유효하지 않습니다.

컨트롤이 동적으로 추가 / 제거되는 FormArray에 ‘Validator.required’를 설정 한 것으로 나타났습니다. 따라서 FormArray가 비어 있어도 여전히 필요했기 때문에 보이는 모든 컨트롤이 올바르게 채워져 있어도 양식은 항상 유효하지 않았습니다.

내 ‘findInvalidControls’함수는 FormGroup / FormArray가 아닌 FormControl 만 확인했기 때문에 양식의 잘못된 부분을 찾지 못했습니다. 그래서 나는 그것을 약간 업데이트했습니다.

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

답변

Chrome의 DevTools에서 Console 탭을 선택합니다.

콘솔 프롬프트에서 명령을 입력하십시오. 

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

어쨌든 컨트롤 접근자를 사용하여 양식의 모든 formControl을 반복 할 수 있습니다.

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- untouched.ng-invalid “입니다.

답변

this.form.updateValueAndValidity()각 컨트롤에서 동일한 방법을 사용 하거나 실행 해보아야 한다고 생각 합니다.