Блог

Я должен найти, имеет ли один из моих formcontrols ошибку шаблона. Если у него есть ошибка шаблона, тогда я должен изменить значение этого formcontrol на null.

Я написал рекурсивный метод, который вызывает сам себя, чтобы проверить, имеет ли элемент управления формой ошибку шаблона, а затем он, наконец, возвращает true или false, но я хочу изменить значение этого formcontrol на null

Вот моя рекурсивная функция,

 hasPatternError(form: AbstractControl, isRecursion = false): boolean {
        if (!isRecursion) {
            this.patternErrors = [];
        }
        if (form instanceof FormControl) {
            return form.hasError('pattern') === true ?? null;
        }
        if (form instanceof FormArray) {
            form?.controls?.forEach(e => {
                this.hasAnyPatternError(e, true);
            });
        }
        if (form instanceof FormGroup) {
            Object.keys(form.controls).forEach(key => {
                const error = this.hasAnyPatternError(form.get(key), true);
                if (error === true) {
                    this.patternErrors.push(error);
                }
            });
            return this.patternErrors.length > 0 ? true : false;
        }
}
 

Это моя форма, прослушивающая событие изменения значения. В событии изменения я вызываю приведенный выше рекурсивный метод, чтобы определить, имеет ли какой-либо элемент управления формой ошибку шаблона, но застрял при изменении значения этого formcontrol на null.

Примечание: я хочу, чтобы метод (hasPatternError) возвращал объект (с ошибкой, преобразованной в null, и не ожидал, что форма изменится в реальном времени)

 ngOnInit() {
    this.myForm = this.fb.group({
      name: [''],
      address: this.fb.group({
        street: [''],
        zip: [''],
        licenseNo: ['', [Validators.required, Validators.pattern(/^[a-z0-9]{10}$/i)]],
      })
    })
    this.myForm.valueChanges.subscribe(
      data => {
        console.log(this.hasAnyPatternError(this.myForm))
      }
    );
  }
 

Вот мой код на stackblitz

У вас уже есть ссылка на form элемент управления и элемент управления key , когда вы нажимаете на ошибку.

Установите значение для элемента управления в это время.

• Поскольку вы делаете это с помощью рекурсии, кажется, что у него какое-то странное поведение, когда я играл с ним в вашем стекблите.
• Но я хотел подчеркнуть, что для этого в элементе управления есть setValue функция, просто нужно определить наилучший способ ее использования в вашей логике.
• Возможно, даже потребуется изучить отмену поведения и т. Д., Чтобы предоставить пользователю время для завершения нажатия клавиш.

 if (!form.controls[key]['controls'] amp;amp; error === true) {
                    setTimeout(()=>{
                      form.controls[key].setValue('');
                    },3000)
                    this.patternErrors.push(error);
                }
 

Я добавил a setTimeout , чтобы подождать 3 секунды, прежде чем снова установить значение '' для имитации отмены… похоже, это работает, но это неправильное решение, просто иллюстрирует принцип, который вам нужно изучить, чтобы setValue правильно использовать в вашей рекурсии.

STACKBLITZ

https://stackblitz.com/edit/ng-nested-formgroup-zet7ry?file=src/app/app.component.ts

Вместо того, чтобы возвращать логические значения, указывающие на ошибку шаблона, возвращайте элементы управления с ошибками шаблона.

 findPatternErrors(formItem: AbstractControl): FormControl[] {
  if (formItem instanceof FormControl) {
    if (formItem.hasError('pattern')) {
      return [formItem];
    } 
    return [];
  } 

  if (formItem instanceof FormArray) {
    const patternErrors: FormControl[] = [];
    formItem.controls?.forEach(arrayItem => {
      const ctrls = this.findPatternErrors(arrayItem);
      Array.prototype.push.apply(patternErrors, ctrls);
    });
    return patternErrors;
  }

  if (formItem instanceof FormGroup) {
    const patternErrors: FormControl[] = [];
    Object.keys(formItem.controls).forEach(key => {
      const ctrls = this.findPatternErrors(formItem.get(key));
      if (ctrls.length) {
        Array.prototype.push.apply(patternErrors, ctrls);
      }
    });
    return patternErrors;
  }
}
 

https://stackblitz.com/edit/ng-nested-formgroup-fmhfcs?file=src/app/app.component.ts