Angular 初始化时 FormBuild 电子邮件验证失败（值为对象）

Question

在我的 Angular v5.1.2 项目中，我正在使用 FormBuilder 创建简单的表单：

this.userDetailsForm = this.formBuilder.group({
  id: [{value: this.user.userid || '', disabled: true}, [Validators.required]],
  email: [{value: this.user.email || ''}, [Validators.required, Validators.email]],
  firstName: [{value: this.user.firstName || ''}, [Validators.required]],
  lastName: [{value: this.user.lastName || ''}, [Validators.required]]
});

我对 email 字段有疑问。 Form初始化后就失效了。如果我将电子邮件字段值的初始化从对象表示法切换为

email: [this.user.email, [Validators.required, Validators.email]]

一切正常。

我做了一些调查，在自定义验证器的帮助下，我意识到表单字段值是一个对象，并且在进行任何手动更改之前它一直是该对象。例如，

email: [{value: this.user.email || ''}, [Validators.required, this.myCustomValidator]],

哪里

private myCustomValidator(control) {
  console.log(control.value);
}

给出以下内容：

control.value 在 init

{ value: 'test@test.test' }

control.value 编辑后等于 'test@test.test'

这就是为什么我没有看到其他字段的问题：它们只有 required 个验证器并且 !!({ value: ... }) 总是 true。

那么，是否可以对 FormBuilder 字段初始化使用对象表示法，我的情况可能有什么问题？我希望有可能设置 {value: 'myValue', disabled: true} 之类的选项，但由于验证器问题，目前我无法使用它。

Answer 1

Angular 区分所谓的 boxed 和 unboxed 值。

盒装值是满足以下条件的值：

_isBoxedValue(formState: any): boolean {
  return typeof formState === 'object' && 
        formState !== null &&
        Object.keys(formState).length === 2 && 
        'value' in formState &&
       'disabled' in formState;
}

https://github.com/angular/angular/blob/7c414fc7463dc90fe189db5ecbf3e5befcde6ff4/packages/forms/src/model.ts#L621-L624

如我们所见，我们应该为装箱值提供 value 和 disabled 属性。

如果您传递未装箱的值，那么 angular 会将其视为一个值。

可以在此处找到更多信息

https://github.com/angular/angular/blob/master/packages/forms/test/form_control_spec.ts#L50-L77

Angular 初始化时 FormBuild 电子邮件验证失败（值为对象）

Angular FormBuild email validation fails on the init (the value is an object)

angular

angular-forms