angular - 根据控件的角度反应形式自动组验证

Question

我不确定这是否是预期的行为；我有以下内容：

this.formGroup = this.fb.group({
  name: this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required]
  })
});

<div formGroupName="name">
  <input type="text" formControlName="firstName">
  <input type="text" formControlName="lastName">
</div>

当我提交表单时console.log(this.formGroup)， 的errors对象name AbstractControl为空。我预计它应该有一个Objectwith required: true。我哪里错了？

Answer 1

感谢@yurzui 指出相关问题——这是一种解决方法，只需检查两个控件：

import {AbstractControl} from '@angular/forms';

export const nameValidator = (control: AbstractControl): {[key: string]: boolean} => {
	const firstName = control.get('firstName');
	const lastName = control.get('lastName');
	if (!firstName || !lastName) {
		return null;
	}
	return firstName.value && lastName.value ? null : { required: true };
};

当然，这需要明确包含为验证器：

name: this.fb.group({
  firstName: ['', Validators.required],
  lastName: ['', Validators.required]
}, {validator: nameValidator}),