14
rated 0 times
[
21]
[
7]
/ answers: 1 / hits: 13131
/ 4 Years ago, tue, december 8, 2020, 12:00:00
error TS2531: Object is possibly 'null'.
46 <ng-container *ngFor="let userFormGroup of
usersForm.get('users')['controls']; let i=index">
46:48 - error TS7052: Element implicitly has an 'any' type because
type 'AbstractControl' has no index signature. Did you mean to
call 'get'?
46 <ng-container *ngFor="let userFormGroup of
usersForm.get('users')['controls']; let i=index">
TS File
public usersForm!: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() :void {
this.usersForm = this.fb.group({
users: this.fb.array([
this.fb.group({
gHService: [''],
quantity: [''],
startTime: [''],
endTime: [''],
remarks: ['']
})
])
})
}
removeFormControl(i: number) {
let usersArray = this.usersForm.get('users') as FormArray;
usersArray.removeAt(i);
}
addFormControl() {
let usersArray = this.usersForm.get('users') as FormArray;
let arraylen = usersArray.length;
let newUsergroup: FormGroup = this.fb.group({
gHService: [''],
quantity: [''],
startTime: [''],
endTime: [''],
remarks: ['']
})
usersArray.insert(arraylen, newUsergroup);
}
onSubmit(){
console.log(this.usersForm.value);
}
Template File
<form [formGroup]="usersForm" (ngSubmit)="onSubmit()">
<ng-container *ngFor="let userFormGroup of usersForm.get('users')['controls']; let i=index">
<div [formGroup]="userFormGroup">
<label>
Service Name:
<input type="text" formControlName="gHService">
</label>
<label>
Quantity:
<input type="text" formControlName="quantity">
</label>
<label>
Start Time:
<input type="text" formControlName="startTime">
</label>
<label>
End Time:
<input type="text" formControlName="endTime">
</label>
<label>
Remarks:
<input type="text" formControlName="remarks">
</label>
<label>
<button (click)="removeFormControl(i)">remove formGroup</button>
</label>
</div>
</ng-container>
<button type="submit">Submit</button>
</form>
<button (click)="addFormControl()">add new user formGroup</button>
More From » angular
