在我的 Angular 表单中获取“类型错误：无法读取未定义的属性‘错误’”

Question

我想要一个 Reactive 表单来创建客户端，但是，当我为我的应用程序提供服务时，我在控制台中收到此错误：

TypeError: Cannot read property 'errors' of undefined

它指向这个块的第一个<li>元素：

  <ul class="help-block">
      <li *ngIf="form.controls.email.errors?.required && form.controls.email.dirty">Required</li>
      <li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) && form.controls.email.dirty">Minimum chars: 5, maximum 35</li>

    </ul>

完整形式代码：

    <form style="border:1px solid" [formGroup]="form" 
    (submit)="onRelatieSubmit()">
    <h4> New client </h4>
    <div class="form-group">

      <label for="company">Company</label>
      <div class="col-5">
        <input  [ngClass]="{'is-invalid': (form.controls.company.errors && 
    form.controls.company.dirty),
        'is-valid': !form.controls.company.errors}" class="form-control" type="text" name="company" (autocomplete)="off" placeholder="Name" formControlName="company" (blur)="checkUsername()"/>
        <ul class="help-block">
          <li *ngIf="form.controls.company.errors?.required && form.controls.company.dirty">Required</li>
          <li *ngIf="(form.controls.company.errors?.minlength || form.controls.company.errors?.maxlength) && form.controls.company.dirty">Minimum chars: 5, maximum 25</li>


        </ul>
      </div>
    </div>
    <div class="form-group">
      <label for="addressLineOne">Address</label>
      <div class="col-5">
        <input [ngClass]="{'is-invalid': (form.controls.addressLineOne.errors && form.controls.addressLineOne.dirty) ,
     'is-valid': !form.controls.addressLineOne.errors}" id="addressLineOne" class="form-control" type="text" name="addressLineOne" (autocomplete)="off" placeholder="Address" formControlName="addressLineOne" (blur)="checkEmail()"/>

        <ul class="help-block">
          <li *ngIf="form.controls.addressLineOne.errors?.required && form.controls.addressLineOne.dirty">Requiredt</li>



        </ul>
      </div>
    </div>
    <div class="form-group">
      <label for="city">City</label>
      <div class="col-5">
        <input  [ngClass]="{'is-invalid': (form.controls.city.errors && form.controls.city.dirty), 'is-valid': !form.controls.city.errors}" id="city" class="form-control" type="text" name="city" (autocomplete)="off" placeholder="City" formControlName="city"/>
        <ul class="help-block">
          <li *ngIf="form.controls.city.errors?.required && form.controls.city.dirty">Requiredt</li>

        </ul>
      </div>
    </div>

    </div>


<div class="form-group">
      <label for="email">Email</label>
      <div class="col-5">

        <input [ngClass]="{'is-invalid': (form.controls.email.errors && form.controls.email.dirty),
     'is-valid': !form.controls.email.errors}" id="email" class="form-control" type="text" name="email" (autocomplete)="off" placeholder="Email" formControlName="email"/>

        <ul class="help-block">
          <li *ngIf="form.controls.email.errors?.required && form.controls.email.dirty">Required</li>
          <li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) && form.controls.email.dirty">Minimum chars: 5, maximum 35</li>


        </ul>
      </div>
    </div>




    <div class="form-group">
      <label for="country">Country</label>
      <div class="col-5">
        <input  [ngClass]="{'is-invalid': (form.controls.country.errors && form.controls.country.dirty) , 'is-valid': !form.controls.country.errors}" id="country"  class="form-control" type="text" name="country" (autocomplete)="off" placeholder="Country" formControlName="country"/>
        <ul class="help-block">
          <li *ngIf="form.controls.country.errors?.required && form.controls.country.dirty">Required</li></ul>

      </div>
    </div>

    <div class="form-group">
      <label for="postalCode">Postal code</label>
      <div class="col-5">
        <input  [ngClass]="{'is-invalid': (form.controls.postalCode.errors && form.controls.postalCode.dirty) , 'is-valid': !form.controls.postalCode.errors}" id="postalCode"  class="form-control" type="text" name="postalCode" (autocomplete)="off" placeholder="Postal Code" formControlName="postalCode"/>
        <ul class="help-block">
          <li *ngIf="form.controls.postalCode.errors?.required && form.controls.postalCode.dirty">Required</li></ul>

      </div>
    </div>

    <div class="form-group">
      <label for="phone">Phone</label>
      <div class="col-5">
        <input  [ngClass]="{'is-invalid': (form.controls.phone.errors && form.controls.phone.dirty), 'is-valid': !form.controls.phone.errors}" id="phone"  class="form-control" type="text" name="phone" (autocomplete)="off" placeholder="Aantal kilometers" formControlName="phone"/>
        <ul class="help-block">
          <li *ngIf="form.controls.phone.errors?.required && form.controls.phone.dirty">Required</li></ul>

      </div>
    </div>

    <input [disabled]="!form.valid || processing" type="submit" class="btn btn-primary" value="Submit" />
  </form>

这是我在 `client.component.ts' 中的 CreateForm 函数

createForm() {
this.form = this.formBuilder.group(
  {
    company: ['', Validators.compose([
      Validators.required,
      Validators.minLength(5),
      Validators.maxLength(35),


    ])],
    addressLineOne: ['', Validators.compose([
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(35),

    ])],
    city: ['', Validators.compose([
      Validators.required,
      Validators.minLength(8),
      Validators.maxLength(35),

    ])],
    country: ['', Validators.compose([
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(35),

    ])],
    postalCode: ['', Validators.compose([
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(35),

    ])],
    phone: ['', Validators.compose([
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(35),

    ])],
    email: ['', Validators.compose([
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(35),

    ])],

  }
)

}

为什么说电子邮件未定义？ 我不明白，我已经在 formbuilder.group 中声明了如果您需要更多信息，请告诉我

Answer 1

In.ts写

 get addressLineOne() {
    return this.form.get('addressLineOne');

}

在 html 中：

<ul class="help-block">
      <li *ngIf="addressLineOne.errors?.required && addressLineOne.dirty">Requiredt</li>
</ul>

Answer 2

尝试此操作以查看错误是否不再存在并且表单是否呈现：

<ul class="help-block" *ngIf="form.controls.email">
      <li *ngIf="form.controls.email.errors?.required && form.controls.email.dirty">Required</li>
      <li *ngIf="(form.controls.email.errors?.minlength || form.controls.email.errors?.maxlength) && form.controls.email.dirty">Minimum chars: 5, maximum 35</li>

    </ul>

Answer 3

您可以尝试其他方法，而不是手动将所有错误消息添加到您的 html，这可能有助于解决问题，因为它涵盖了所有可能的错误并从 html 进行更有组织的调用。

（这只是一个示例代码，所以请根据您的要求进行修改）

在 your.component 文件中添加一个新属性并为所有要求添加消息。 重要的部分，如果要求的数量和消息（以及类型的名称）应该匹配。

validation_messages = {
      'name': [
        { type: 'required', message: 'Name is required.' }
      ],
      'email': [
        { type: 'required', message: 'Email is required.' },
        { type: 'email', message: 'Please enter a valid email.' }
      ],
      'password': [
        { type: 'required', message: 'Password is required.' },
        { type: 'minlength', message: 'Password must be at least 5 characters long.' },
        { type: 'pattern', message: 'Your password must contain at least one uppercase, one lowercase, and one number.' }
  };

在每个输入块之后的 html 文件中：

（在这个例子中 [formGroup]="validations_form"）

<div class="validation-errors">
   <ng-container *ngFor="let validation of validation_messages.name">
      <div class="error-message"
          *ngIf="validations_form.get('name').hasError(validation.type) 
          && (validations_form.get('name').dirty 
          || validations_form.get('name').touched)">
          {{ validation.message }}
      </div>
   </ng-container>
</div>