I'm attempting to replicate a form using Angular, but I keep getting the error message "Object is possibly 'null'". HTML:
<div class="form-container">
<form class="example">
<mat-form-field>
<mat-label>Name</mat-label>
<input type="text" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
>
<mat-error *ngIf="nameFormControl.hasError('name') && !nameFormControl.hasError('required')">
Please enter a valid name
</mat-error>
<mat-error *ngIf="nameFormControl.hasError('required')">
Please enter name
</mat-error>
</mat-form-field>
<button mat-icon-button color="primary" class="delete" matTooltip="Remove item">
<mat-icon>delete</mat-icon>
</button>
</form>
<button id="addEmailField" (click)="clone()">
<mat-icon>add</mat-icon> Add new item
</button>
</div>
TS:
clone() {
const example = document.querySelector('.example');
const clone = example.cloneNode(true);
document.querySelector('.form-container').appendChild(clone);
}
I am looking for way to duplicate the form container. Any alternative solutions would be greatly appreciated.