无法以 Angular 形式读取 null 的属性“错误”答案

【问题标题】：Cannot read property 'errors' of null in Angular form无法以 Angular 形式读取 null 的属性“错误”
【发布时间】：2020-09-06 13:58:51
【问题描述】：

我正在做我的第一个 Angular 项目。所以我还在学习。在我的控制台中，我收到错误

无法读取 null 的属性“错误”

当我在填写“naam”和“soort”后单击按钮时。

我的html：

<h1>Voeg een dier toe</h1>
<form class="ui form" [formGroup]='dier' (ngSubmit)='onSubmit()'>
    <div class="field">
      <label>Naam van het dier</label>
      <input
       matInput 
       aria-label="naam" 
       placeholder="naam"
       type="text" 
       formControlName="naam" 
       required
       #spy 
       /> 
      <div class="ui red message" 
       *ngIf="dier.get('naam')['errors'] && dier.get('naam').touched" //the error points to this line
       > 
       {{getErrorMessage(dier.get('naam')['errors']) }}
      </div>
    </div>
    <div class="field">
      <label>Soort van het dier</label>
      <input 
      matInput 
      aria-label="soort"
      type="text" 
      formControlName="soort" 
      placeholder="soort" 
      required>
      <div class="ui red message" 
       *ngIf="dier.get('soort')['errors'] && dier.get('soort').touched"
       > 
       {{getErrorMessage(dier.get('soort')['errors']) }}
      </div>
    </div>
    <button class="ui button" type="submit" [disabled]='!dier.valid' >Voeg toe</button>
  </form>


  <div class="ui red message" class="error" *ngIf="errorMessage" data-cy="appError">
    Error bij het maken van een dier: {{ errorMessage }}
  </div>
  <div class="ui red message"
    class="confirmation"
    *ngIf="confirmationMessage"
    data-cy="appConfirmation"
  >
    {{ confirmationMessage }}
  </div>

还有我的component.ts（没有导入和@Component）

export class AddDierComponent implements OnInit {
  public dier: FormGroup;
  public errorMessage: string = '';
  public confirmationMessage: string = '';
  constructor(
    private fb: FormBuilder, 
    private _dierdataservice: DierDataService
    ) { }

  ngOnInit(){
    this.dier = this.fb.group({
      naam: ['', [Validators.required, Validators.minLength(2)]],
      soort: ['', [Validators.required, Validators.minLength(2)]]
    });
  }

  getErrorMessage(errors: any): string {
    if (errors.required) {
      return 'is verplicht in te vullen';
    } else if (errors.minlength) {
      return `heeft minimum ${errors.minlength.requiredLength} 
        karakters nodig (heeft er nu  ${errors.minlength.actualLength})`;
    }
  }

  onSubmit(){
    this._dierdataservice
    .addNewDier(new Dier(this.dier.value.naam, this.dier.value.soort, 1))
    .pipe(
      catchError((err) => {
        this.errorMessage = err;
        return EMPTY;
      })
    )
    .subscribe((rec: Dier) => {
      this.confirmationMessage = `Het dier ${rec.naam} is toegevoegd`;
    });
    //rebind to a new group here after a submit (so the form resets)
    this.dier = this.fb.group({
      naamDier: ['', [Validators.required, Validators.minLength(2)]],
      dierSoort: ['', [Validators.required, Validators.minLength(2)]]
    });
  }

谁能帮我摆脱这个错误？谢谢！

【问题讨论】：

标签： angular forms frontend

【解决方案1】：

您需要检查该字段是否无效作为您的第一个条件，如下所示：*ngIf="dier.get('naam').invalid && dier.get('naam').touched"

【讨论】：

【解决方案2】：

在我的组件中我改变了

this.dier = this.fb.group({
  naamDier: ['', [Validators.required, Validators.minLength(2)]],
  dierSoort: ['', [Validators.required, Validators.minLength(2)]]
});

到

this.dier = this.fb.group({
  naam: ['', [Validators.required, Validators.minLength(2)]],
  soort: ['', [Validators.required, Validators.minLength(2)]]
});

它奏效了。这是我忘记在那里做的改变。

【讨论】：