Невозможно прочитать свойство 'dirty' из undefined

Question

Я создаю компонент для шоу для ошибки в 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>

Ts

    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])]
    })
  }

, но при загрузке страницы покажите мне эту ошибку:

Не удается прочитать свойство 'dirty' из неопределенных

и , это мой пример кода

в чем проблема?как я могу решить эту проблему?

Answer 1

Вы определили @Input("field") fieldName:string;, что означает, что входное свойство field будет сопоставлено с переменной fieldName.Но вы использовали fieldName="family" в качестве задания.Измените это на field="family".

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