Add/Remove values from the textboxes in Angular - html

Question

I would like to add values from the input controls to the applicable divs as displayed in the picture
example.
I followed this Tutorial and I am able to replicate the same controls again and again but not as represented in this picture. This is code, can someone lead me where I went wrong? posted the html and component.ts.
<form [formGroup]="FemaForm" (ngSubmit)="onSubmit()" class="form-horizontal">
<div formArrayName="aliases">
<div *ngFor="let alias of aliases.controls; let i=index">
<label>Cause</label>
<input id="reason" formControlName="cause" type="text" class="form-control"
[formControlName]="i">
<label>Start</label>
<input name="Start" formControlName="Start" type="text"
placeholder="MM/DD/YYYY" [formControlName]="i" />
<label>End</label>
<input name="End" formControlName="End" type="text" placeholder="MM/DD/YYYY" [formControlName]="i" />
<label >FLD</label>
<input id="FLD" formControlName="FLD" type="text" class="form-control"
[formControlName]="i" >
<label>Valid </label>
<input id="Extn" formControlName="Extn" type="text" class="form-control"
[formControlName]="i">
<button (click)="deleteAlias(i)"></button>
</div>
<button (click)="add(i)"> </button>
<button type="submit">Log</button>
</div>
</form>
export class TestComponent {
constructor(private fb: FormBuilder) { }
FemaForm= this.fb.group({
cause: [''],
Start: [''],
End: [''],
FLD: [''],
Extn: [''],
aliases: this.fb.array([
this.fb.control('')
])
});
get aliases() {
return this.FemaForm.get('aliases') as FormArray;
}
add() {
this.aliases.push(this.fb.control(''));
}
deleteAlias(index) {
this.aliases.removeAt(index);
}
}