13

嗨，我正在使用 Form Builder 以 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: [''],

    });

}

它工作正常。但是当要在前端显示验证时

我是这样用的

  <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>

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

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

请帮助我如何排序。

谢谢你。

4

5 回答 5

19

你应该像这样使用它：

<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>
于 2017-07-26T13:39:12.857 回答
4

如果您正在使用响应式表单，您可能应该使用TypeScript getter 来解决这个问题，它会干净得多：

在响应式表单中，您始终可以通过其父组上的 get 方法访问任何表单控件，但有时将 getter 定义为模板的简写很有用。

getter 将允许您直接访问表单字段，避免在myForm.controls['fieldNameGoesHere'].上面的示例中冗余使用 with ngIf。

例如，在您的方法company_address2之后添加以下内容：ngOnInit()

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

这将使您的组件 HTML 直接访问 ，请company_address2尝试一下：

<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>

不过，您将分别定义每个 getter 方法，TypeScript 不允许将变量提供给 getter，因此您最终将为表单中的每个控件提供一个 get 方法。

更多信息可以在Form Validation: Built-in Validators下的 Angular 文档中找到。

于 2019-01-07T21:49:45.157 回答
0

我在 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>
于 2018-05-07T09:29:59.610 回答
0

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

 <mat-error>Title is required</mat-error>
于 2019-11-29T19:24:26.397 回答
0

我这样解决了这个问题：

<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>
于 2018-09-25T08:03:48.753 回答