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

但是当页面加载时向我显示此错误：

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

和this is my sample code

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

Answer 1

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

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

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

1 个答案: