Angular 用于验证的带有hasError（）的表单生成器抛出错误类型error:Cannot read property'；hasError'；未定义的

嗨，我正在使用FormBuilder在angular 2中实现一个表单

在component.ts中，我使用formGroup实现了我的表单

下面是我的代码

public myForm: FormGroup;

constructor(private authenticateservice: AuthenticateService,
              private _fb: FormBuilder
             ) {


}

ngOnInit() {

this.myForm = this._fb.group({
      address: [this.userDetails.address, [<any>Validators.required]],
      address2: ['', [<any>Validators.required]],
      city: ['', [<any>Validators.required]],
      company_address: ['', [<any>Validators.required]],
      company_address2: ['', [<any>Validators.required]],
      company_city: ['', [<any>Validators.required]],
      company_country: ['', [<any>Validators.required]],
      company: ['', [<any>Validators.required , Validators.minLength(3)] ],
      company_tax_number: ['', [<any>Validators.required]],
      company_zip: ['', [<any>Validators.required,  Validators.minLength(5) , Validators.maxLength(7)]],
      country: ['', [<any>Validators.required]],
      email: ['', [<any>Validators.required, Validators.email]],
      first_name: [this.userDetails.first_name, [<any>Validators.required]],
      id: ['', [<any>Validators.required]],
      last_name: ['', [<any>Validators.required]],
      phone: ['', [<any>Validators.required, Validators.minLength(10)]],
      zip: ['', [<any>Validators.required , Validators.minLength(5) , Validators.maxLength(7)]],
      user_type: ['2', [<any>Validators.required]],
      terms: [0, [<any>Validators.required]],
      hash_tag: [''],

    });

}

公共myForm:FormGroup；
构造函数（私有authenticateservice:authenticateservice，
私人(fb):FormBuilder
) {
}
恩戈尼尼特（）{
this.myForm=this.\u fb.group({
地址：[this.userDetails.address，[Validators.required]]，
地址2:[''[Validators.required]]，
城市：[''[Validators.required]]，
公司地址：[''，[需要验证人]]，
公司地址2:[''[需要验证人]]，
公司城市：[''[需要验证人]，
公司所在国家：[''，[需要验证人]，
公司：[''[Validators.required，Validators.minLength（3）]，
公司税号：[''，[需要验证者]]，
公司邮编：[''，[Validators.required，Validators.minLength（5），Validators.maxLength（7）]，
国家：[''[Validators.required]]，
电子邮件：[''，[Validators.required，Validators.email]]，
first_name:[this.userDetails.first_name，[Validators.required]]，
id:[''，[需要验证程序]]，
姓氏：[''[Validators.required]]，
电话：[''[Validators.required，Validators.minLength（10）]，
zip:[''[Validators.required，Validators.minLength（5），Validators.maxLength（7）]，
用户类型：['2'，[Validators.required]]，
条款：[0，[需要验证程序]]，
散列标签：['']，
});
}

它工作得很好。但在前端显示验证时

我以前是这样的

  <div class="form-group row">
    <div class="col-lg-8">
      <label>Address 2</label>
      <textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" formControlName="company_address2"></textarea>
      <span class="help-block form-error text-danger small" *ngIf="myForm.controls['company_address2'].hasError('required')">Company Address 2 is Required.</span>
    </div>
  </div>

地址2
需要公司地址2。

它正在工作，但在控制台中抛出错误，如下所示

错误类型错误：无法读取未定义的属性“hasError”

请帮我分类

---

谢谢。

您应该这样使用它：

<span class="help-block form-error text-danger small" 
  *ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is Required </span>

需要公司地址2

我在angular 5中遇到了这个问题，请尝试下面的一个，您将得到输出

<mat-error>
<span class="help-block form-error text-danger small" 
  *ngIf="myForm.controls['company_address2'].errors?.required &&
  myForm.controls['company_address2'].touched">Company Address 2 is Required </span>
</mat-error>

需要公司地址2

我这样解决了这个问题：

<span class="help-block form-error text-danger small" 
*ngIf="myForm.controls.company_address2.errors?.required &&
myForm.controls.company_address2.touched">
Company Address 2 is Required </span>

需要公司地址2

如果您使用的是被动表单，您可能应该使用TypeScript getter来解决这个问题，它会更干净：

在被动表单中，您始终可以通过 在其父组上获取方法，但有时定义 getter作为模板的简写

getter将允许您直接访问表单字段，避免在上面的示例中使用ngIf冗余使用

myForm.controls['fieldnamegoesher'.

例如，对于

公司地址2

在您的

ngOnInit（）

方法之后添加以下内容：

get company_address2() { return this.myForm.get( 'company_address2' ); }

这将使您的组件HTML可以直接访问

公司地址2

，请尝试一下：

<textarea class="form-control" placeholder="Address" rows="2" [readonly]="disabled" id="companyaddress2" 
    formControlName="company_address2">
</textarea>

<span class="help-block form-error text-danger small"
    *ngIf="company_address2.hasError('required')">
    Company Address 2 is Required.
</span>

需要公司地址2。

您将有单独定义每个getter方法的权限，但是TypeScript不允许向getter提供变量，因此您的表单中的每个控件都将有一个get方法

---

更多信息可以在下的角度文档中找到。

对于所需的错误消息，这一行应该可以使用

 <mat-error>Title is required</mat-error>

标题是必需的

可选值帮助了我。我的方法有点不同，我使用control？.hasError（“someError”）。非常感谢。