title: Angular 9 - ERROR TypeError: Cannot read property 'name' of undefined
body: <p>I am trying to create a dynamic form-control, I want some controls to be disabled based on the condition, but I get Type error of undefined. 
  here is my code for it.</p>
  
  <pre><code>ngOnInit(): void {
  
   this.dynamicForm = this.formBuilder.group({
        tickets: new FormArray([])
    });
    }
    get f() { return this.dynamicForm.controls; }
    get t() { return this.f.tickets as FormArray; }
  
         itemClick(node) {
  
  for (let i = 0 ; i &lt; this.data_tree.length; i++) {
           this.nestsort.push(Object.assign({}, ...function _flatten(o) { return [].concat(...Object.keys(o).map(k =&gt; typeof o[k] === 'object' ? _flatten(o[k]) : ({[k]: o[k]})))}(this.data_tree[i])))
        var check
           rights.forEach(element =&gt; {
            if(element == this.temp[i].id)
            {
             check = false
            }
            else{
              check = true;
            }
  
  
          });
           this.t.push(this.formBuilder.group({
            name: ({value: [this.nestsort[i][aisa]], disabled: check})   
  
    }));      
  
  
  
  
           this.temp1 = this.t.value;
  
  
       }
  
  
  } 
  </code></pre>
  
  <p>now if I don't use else condition and only if it doesn't give me an error but It only renders the disabled input fields.</p>
  
  <p>this is my HTML code </p>
  
  <pre><code>&lt;div *ngFor="let ticket of t.controls; let i = index"&gt;
                &lt;div [formGroup]="ticket"&gt;
                    &lt;div&gt;
                        &lt;mat-form-field *ngIf="temp1[i].name" appearance="outline"  style="width: 95%;"&gt;
                          &lt;mat-label&gt;{{temp[i].id}} &lt;/mat-label&gt;
                        &lt;input matInput type="text" placeholder="Name"  formControlName="name" class="form-control"/&gt;
                        &lt;!-- &lt;mat-hint &gt;Errors appear instantly!&lt;/mat-hint&gt; --&gt;
                      &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I just want to create the input fields and some of them should be disabled because user don't have permission to change it, but it cant seems to create these fields and give me an error. the error is as follows,</p>
  
  <pre><code>navbars.component.html:77 ERROR TypeError: Cannot read property 'name' of undefined
      at Object.updateDirectives (navbars.component.html:79)
      at Object.debugUpdateDirectives [as updateDirectives] (core.js:46970)
      at checkAndUpdateView (core.js:45981)
      at callViewAction (core.js:46347)
      at execEmbeddedViewsAction (core.js:46304)
      at checkAndUpdateView (core.js:45982)
      at callViewAction (core.js:46347)
      at execEmbeddedViewsAction (core.js:46304)
      at checkAndUpdateView (core.js:45982)
      at callViewAction (core.js:46347)
  </code></pre>