无法读取未定义的属性“脏”答案

【问题标题】：Cannot read property 'dirty' of undefined无法读取未定义的属性“脏”
【发布时间】：2019-08-24 02:26:31
【问题描述】：

我为shared.module.ts 中的错误创建了一个组件。

<span *ngIf="fieldErrors(fieldName)">
<div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).required">
    پر کردن   {{nicename}}  اجباری است
</div>
<div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).touched">
    پر کردن   {{nicename}}  اجباری است
</div>
<div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).pattern">
    باید از کارکتر های فارسی استفاده شود
</div>
<div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).minlength">
    تعداد کارکتر های مورد استفاده باید بیشتر از {{fieldErrors(fieldName).minlength.requiredLength}} باشد
</div>

    export class FilderrorComponent implements OnInit {

  @Input("form") from:FormGroup
  @Input("field") fieldName:string;
  @Input("nicename") nicename:string;
  constructor() { }

  ngOnInit() {
  }

  fieldErrors(field:string){
    let controlState=this.from.controls[field];
    return (controlState.dirty || controlState.touched) ? controlState.errors:null;
  }

我在 html 文件中使用它：

 <form [formGroup]="addCatFG" >
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="inputEmail4">نام دسته</label>
        <input type="email" class="form-control" id="inputEmail4" formControlName="name">
        <app-filderror [form]="addCatFG" fieldName="name" nicename="نام دسته"></app-filderror>
      </div>
      <div class="form-group col-md-6">
        <label for="inputState">زیر دسته</label>
        <select id="inputState" class="form-control" formControlName="parentId">
          <option selected>دسته مورد نظر را انتخاب کنید</option>
          <option>دسته اصلی</option>
        </select>
        <app-filderror form="addCatFG" field="parentId" nicename="زیر دسته"></app-filderror>
      </div>
    </div>
  </form>

这是TS

      InitialForm()
  {
    this.addCatFG=this.fb.group({
      name:['',Validators.compose([Validators.required])],
      parentId:['',Validators.compose([Validators.required])]
    })
  }

但是当页面加载时显示这个错误：

无法读取未定义的“脏”属性

和this is my sample code

有什么问题？我该如何解决这个问题？

【问题讨论】：

试试这个return controlState && (controlState.dirty || controlState.touched) ? controlState.errors:null;
@NadhirFalta 它对我不起作用

标签： javascript angular typescript angular7

【解决方案1】：

您定义了@Input("field") fieldName:string;，这意味着输入属性field 将映射到变量fieldName。但是您使用fieldName="family" 作为分配。将其更改为 field="family"。

<app-filederror [form]="addCatFG"  field="family" nicename="family"></app-filederror>

【讨论】：