Angular中ContactFormComponent实现OnInit接口报ngOnInit缺失错误求解

核心错误原因 #

• 你把ngOnInit生命周期方法写在了ContactFormComponent类的闭合花括号}之外，不属于类的成员方法，因此触发两个报错：
  1. 类内部缺少接口要求的ngOnInit属性，无法匹配OnInit接口约束
  2. 全局作用域没有定义ngOnInit方法，触发名称找不到错误

修复步骤 #

1. 把类外面的ngOnInit方法整体剪切，粘贴到类内部，放在onSubmit方法之后、类闭合花括号之前即可。
2. 额外修复你表单定义里的语法错误：多验证规则需要放在数组内，否则会被识别为额外参数：
   原错误的zip控件定义：

zip :  ['', Validators.required, Validators.minLength(6), Validators.maxLength(6), {updateOn: 'blur'}],

修正后：

zip :  ['', [Validators.required, Validators.minLength(6), Validators.maxLength(6)], {updateOn: 'blur'}],

3. 你当前写的get state、get country等嵌套表单控件取值方法错误，需要从addressFormGroup中取值，示例：

get state(){
  return this.checkoutForm.get('address.state')
}

完整修正后的核心代码片段 #

export class ContactFormComponent implements OnInit {
  // 原有类内部的属性、get方法、onSubmit方法保持不变
  onSubmit(){
    console.warn(this.checkoutForm.value)
  }

  // 把ngOnInit移到类内部
  ngOnInit() {
    // 这里写初始化逻辑，暂时没有逻辑可以留空，必须保留方法实现
  }
}
// 类外面不能再留ngOnInit的代码

内容的提问来源于stack exchange，提问作者Whizfactor