Unable to type more than 1 character with formgroup within a formarray in reactive form

Question

I am thinking this could be a bug for Reactive Form. I would appreciate any help from more experienced Angular Experts.

Symptom: Unable to key in more than 1 character in input at given time.

Occurrence: When input is a FormGroup within a FormArray

Special Instructions : I have not Used FormBuilder

Code : Template(.html file)

<form [formGroup]="profileSetup">
<div formArrayName="company">
          Company : 
          <div *ngFor="let companyControl of profileSetup.get('company').value;let i=index;" [formGroupName]="i">
            <br>
            Company Name:<br>
            <input type="text" formControlName="company_name"><br>
            Company Address:<br>
            <input type="text" formControlName="company_address" ><br>
            Started On:<br>
            <input type="date" formControlName="started_on"><br>
            Ended On:<br>
            <input type="date" formControlName="ended_on"><br>
            Title(Worked As):<br>
            <input type="date" formControlName="title"><br>
        </div>
      </div>
      <input type="Submit" value="Submit">
    </form>
    <button value="Add Company" (click)="addCompany()"> Add Company</button><br>

profile.component.ts

profileSetup:FormGroup
    ngOninit(){
      this.profileSetup=new FormGroup({
company:new FormArray([])
})
    }

addCompany(){
        const control=new FormGroup({
          company_name:new FormControl(''),
          company_address:new FormControl(''),
          started_on:new FormControl(''),
          ended_on:new FormControl(''),
          title:new FormControl('')
        });
        (<FormArray>this.profileSetup.get('company')).push(control);
        console.log(this.profileSetup.get('company').value);
      }

Answer 1

In the ngFor, instead of .value it should be .controls