angular - 使用 ControlValueAccessor 进行子表单的响应式(Reactive)表单在提交时显示错误

Question

我有一个简单的登录页面，其中包含响应式(Reactive)表单和子表单组件app-login-form，它使用ControlValueAccessor，它正在工作，但我无法弄清楚如何在子窗体中显示错误。这是我开始创建更复杂的表单之前的一个示例。

提交后，我尝试访问子表单和 markAllAsTouched，但当我观察类不会更改的元素时。

我快速做了一个StackBlitz展示我在做什么。如何在提交表单时显示错误消息？

public onSubmit(event: Event): void {
  if (this.form.valid) {
    console.log('VALID', this.form.value);
  } else {
    console.log('INVALID', this.form.value);

    Object.keys(this.form.controls).forEach((controlName) => {
      console.log('SHOW_ERRORS', controlName);
      const control = this.form.get(controlName);
      // ISSUE: Nothing changes on the element still ng-untouched, and 
      // was expecting it to be ng-touched
      control.markAllAsTouched();
    });
  }
}

Answer 1

我会采取稍微不同的方法，不使用 ControlValueAccessor，而是使用“常规”子组件并使用 ControlContainer，然后您可以跳过所有 markAsTouched 的东西，因为 parent 会知道 child 发生的任何事情。

父级:

this.form = this.formBuilder.group({});

模板:

<app-login-form></app-login-form>

子组件，我们将表单控件添加到现有的父表单中:

@Component({
  selector: "app-login-form",
  templateUrl: "./login-form.component.html",
  styleUrls: ["./login-form.component.css"],
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class LoginFormComponent implements OnInit {

  childForm: FormGroupDirective;
  constructor(
    parentForm: FormGroupDirective,
    private fb: FormBuilder
    ) {
    this.childForm = parentForm;
  }

  ngOnInit() {
    this.childForm.form.addControl('username', this.fb.control('', [Validators.required]));
    this.childForm.form.addControl('password', this.fb.control('', [Validators.required]));
  }
}

然后在模板中您只需使用 formControlName 而不是 [formControl]，例如:

 <input matInput formControlName="username">
 <mat-error *ngIf="childForm.hasError('required', 'username')">Required</mat-error>

同时删除child中的form标签，并且记得在图标中添加type="button"，否则按钮将被视为submit。

从父表单提交中，您可以删除:control.markAllAsTouched();

我会用完整的代码来 fork 你的 stackblitz，但似乎我不被允许 fork 它。所以希望我记得提及我所做的所有更改，否则请提供一个可以 fork 的 stackblitz。