PROSAGA码农传奇-Angular-我收到以下错误：ERROR TypeError：无法读取未定义的属性'invalid'

我收到以下错误：ERROR TypeError：无法读取未定义的属性'invalid'

作者: 咿呀哟
发布时间: 2025-06-15 02:47:01 (22天前)
转自：

<div class =“post-text”itemprop =“text”>
  <P>
    您需要构建表单控件，您已定义它，但您需要类似以下内容。您需要初始化表单组。
  </p>
   <pre>
    <code>
      import { NgForm, FormGroup, FormBuilder } from '@angular/forms';

//Be sure to import formBuilder and inject through constructor. This will allow you 
//to manage how you will build the form and add validation.
//Its a helper class provided by Angular to help us explicitly declare forms.

constructor( private formBuilder: FormBuilder ){}

public ngOnInit(): void {
    this.loginForm = this.formBuilder.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
});

</code>
  </pre>
  <P>
    您可以在此处定义表单组的控件和验证程序。 （这个例子只是要求每个都有一个值才能有效。这应该建立在
     <code>
      ngOnInit
    </code>
    。
  </p>
  <P>
    然后在您的模板中，您可以删除
     <code>
      [(ngModel)]
    </code>
     并使它看起来像以下。当您需要访问它时，输入的值将保留在控件中。
  </p>
   <pre>
    <code>
      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <input type="text" name ="user" [formControlName]="'username'" 
  class="form-control" required>
<form>

</code>
  </pre>
  <P>
    以上将作为登录用户名/电子邮件的示例。
同样如评论中所述，您在HTML中的表单中有拼写错误。
  </p>
  <P>
    当您尝试访问时，这应该是有效的
     <code>
      valid
    </code>
     和
     <code>
      invalid
    </code>
     来自组的属性。如果您有任何问题，请评论。
  </p>
  <P>
    <a href="https://angular.io/guide/reactive-forms" rel="nofollow noreferrer">
      这是反应形式的Angular文档
    </A>
    。
  </p>
</DIV>