title: Cannot read property 'dirty' of undefined
body: <p>i create a component for show for error in <code>shared.module.ts</code> .</p>
  
  <pre><code>&lt;span *ngIf="fieldErrors(fieldName)"&gt;
  &lt;div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).required"&gt;
      پر کردن   {{nicename}}  اجباری است
  &lt;/div&gt;
  &lt;div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).touched"&gt;
      پر کردن   {{nicename}}  اجباری است
  &lt;/div&gt;
  &lt;div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).pattern"&gt;
      باید از کارکتر های فارسی استفاده شود
  &lt;/div&gt;
  &lt;div class="alert alert-danger mt-1" role="alert" *ngIf="fieldErrors(fieldName).minlength"&gt;
      تعداد کارکتر های مورد استفاده باید بیشتر از {{fieldErrors(fieldName).minlength.requiredLength}} باشد
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>Ts</strong></p>
  
  <pre><code>    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;
    }
  </code></pre>
  
  <p>and i use that in html file :</p>
  
  <pre><code> &lt;form [formGroup]="addCatFG" &gt;
      &lt;div class="form-row"&gt;
        &lt;div class="form-group col-md-6"&gt;
          &lt;label for="inputEmail4"&gt;نام دسته&lt;/label&gt;
          &lt;input type="email" class="form-control" id="inputEmail4" formControlName="name"&gt;
          &lt;app-filderror [form]="addCatFG" fieldName="name" nicename="نام دسته"&gt;&lt;/app-filderror&gt;
        &lt;/div&gt;
        &lt;div class="form-group col-md-6"&gt;
          &lt;label for="inputState"&gt;زیر دسته&lt;/label&gt;
          &lt;select id="inputState" class="form-control" formControlName="parentId"&gt;
            &lt;option selected&gt;دسته مورد نظر را انتخاب کنید&lt;/option&gt;
            &lt;option&gt;دسته اصلی&lt;/option&gt;
          &lt;/select&gt;
          &lt;app-filderror form="addCatFG" field="parentId" nicename="زیر دسته"&gt;&lt;/app-filderror&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>and this is <strong>TS</strong></p>
  
  <pre><code>      InitialForm()
    {
      this.addCatFG=this.fb.group({
        name:['',Validators.compose([Validators.required])],
        parentId:['',Validators.compose([Validators.required])]
      })
    }
  </code></pre>
  
  <p>but when page is load show me this error :</p>
  
  <blockquote>
    <p>Cannot read property 'dirty' of undefined</p>
  </blockquote>
  
  <p>and <a href="https://stackblitz.com/edit/angular-utrvv2?file=src%2Fapp%2Fform%2Fform.component.html" rel="nofollow noreferrer">this is my sample code</a></p>
  
  <p>whats the problem ? how can i solve this problem ?</p>