在严格模式下通过 FormBuilder 的 Angular 类型反应形式答案

【问题标题】：Angular typed reactive form via FormBuilder in strict mode在严格模式下通过 FormBuilder 的 Angular 类型反应形式
【发布时间】：2023-01-31 06:46:57
【问题描述】：

我正在尝试关注tutorial（Angular 15），但它不起作用 https://gist.github.com/jhades/2d678f0140a013ec3d0b5eb2e450944c#file-01-ts

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

   form = this.fb.group({
      email: ["", {
        validators: [Validators.required, Validators.email]
      }],
      password: ['', [Validators.required, Validators.minLength(8)]]
   });

  constructor(private fb: FormBuilder) {

  }

  login() {

  }
}

投掷

TypeError: Cannot read properties of undefined (reading 'group')

FormBuilder 似乎没有实例化。我已经尝试以“通常”的方式来做到这一点 https://gist.github.com/jhades/2d678f0140a013ec3d0b5eb2e450944c#file-02-ts 有效（尽管我必须这样做 form!: FormGroup），但它明确声明不要使用这种方式，因为那样你就失去了形式输入。

【问题讨论】：

标签： angular angular-reactive-forms formbuilder

【解决方案1】：

您发布的代码似乎工作正常。 StackBlitz here

【讨论】：

正要发布这个 - 无法重现这个问题！
启用ES2022 + useDefineForClassFields，你会触发这个错误
你每天学习新的东西！这是一个很好的细分：angular.schule/blog/2022-11-use-define-for-class-fields
似乎你只需要启用ES2022，它默认useDefineForClassFields到true 所以我想没有“未来证明”的解决方案，以保持 FormBuilder 和类型的易用性，除非有人想为每个表单声明类型现场自己（这有点违背使用 FormBuilder 的目的）

【解决方案2】：

您的tsconfig.json 中可能有：

{
   target: "es2022",
   useDefineForClassFields: true
}

禁用useDefineForClassFields 将解决您的问题！

【讨论】：

好吧，是的，直到 Angular 决定在未来使标志为真。

【解决方案3】：

在您的项目中，打开 tsconfig.json：

"strict": false,

这将帮助您解决问题。

【讨论】：

我不会关闭严格模式