材质matInput ExpressionChangedAfterItHasBeenCheckedError

Question

我正在尝试构建一个表单字段组件，如Angular Dynamic Form example。

在我需要在输入和选择之间切换输入组件之前，一切都运行良好。添加验证后，我收到以下错误

assert!(values.next().is_none());

没有ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: null'. Current value: 'ng-untouched: mat-error-0'.而只有ngSwitch我从未收到错误。

如何解决问题？

这是组件。

matInput

HTML

import { Component, Input } from '@angular/core';
import { AbstractControl, FormGroup } from '@angular/forms';

export class FieldOptions {
  name: string;
  label: string;
  type: string;
  required: boolean;
  readOnly: boolean;
  maxLength: number;
  choices?: {key: string, value: string}[] = [];
}

@Component({
  selector: 'app-field',
  templateUrl: './field.component.html',
  styleUrls: ['./field.component.scss']
})
export class FieldComponent {
  @Input() fieldOption: FieldOptions;
  @Input() form: FormGroup;

  constructor() { }

  protected findFieldControl(): AbstractControl {
    return this.form.get(this.fieldOption.name);
  }

  fieldHasErrors(): boolean {
    const control = this.findFieldControl();
    if (control && control.touched && control.errors) {
      return true;
    }
  }

  fieldErrors(): FormErrors {
    const control = this.findFieldControl();
    if (this.fieldHasErrors()) {
      return control.errors;
    } else {
      return {};
    }
  }

}

Answer 1

我建议您尝试切换整个mat-form-field而不是输入和选择。您也可以使用ng-container和ng-template重用错误元素而不是复制它们。类似的东西：

def get_section_id
  get_text_from_nested_element(:section, :top, :course, :section_id)
end