I encountered an issue with my simple ngForm that was previously functioning well with string input and single select dropdowns. When I added a multi-select dropdown that introduces an array, I started facing a strange problem. Even after using form.formReset() to save or reset the form, I still receive a "field required validation" error message, which is only resolved with a refresh.
The validation problem arose after adding the multi-select dropdown. I have tried several approaches to solve it, but without success. The code snippet is provided below:
<form #form="ngForm"
class="form-horizontal"
(ngSubmit)="save(form)">
<inf-modal #modal
(onHide)="form.resetForm()"
size="medium">
<mat-card>
<mat-card-title class="inf-modal-title">
Modal View
<button type="button"
class="close"
aria-label="Close"
(click)="modal.hide()">
<span aria-hidden="true">
<mat-icon>clear</mat-icon>
</span>
</button>
</mat-card-title>
<mat-card-content>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="row">
<div class="col-lg-8">
<inf-person-org-composite-entity-selector name="autocompleteSelector"
[(ngModel)]="selectedTarget"
(ngModelChange)="storeTargetId($event)"
[blackList]="blacklistedTargets"
[multiSelect]="false"
[required]="true"
[placeholder]="'Name"
[entitySelectorVisible]="false">
</inf-person-org-composite-entity-selector>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row"
*ngIf="!isTargetInvestigation()">
<div class="col-lg-6">
<inf-multiselect #linkType="ngModel"
name="linkType"
[(ngModel)]="record.linkType"
[optionKey]="'linkType'"
[placeholder]="'linkType' "
[required]="true"></inf-multiselect>
</div>
</div>
<div class="row"
*ngIf="!isTargetInvestigation()">
<div class="col-lg-12">
<div class="form-group">
<mat-form-field>
<input matInput
#comment="ngModel"
[(ngModel)]="record.comment"
name="comment"
[placeholder]="'comment' ">
</mat-form-field>
</div>
</div>
</div>
</mat-card-content>
<mat-card-actions>
<button type="button"
(click)="modal.hide()"
mat-button
color="primary">{{ 'common.cancel' | translate }}
</button>
<button type="reset"
(click)="form.resetForm()"
mat-button
color="primary">{{ 'common.reset' | translate }}
</button>
<button mat-raised-button
color="primary"
type="submit">{{ 'common.assign' | translate}}
</button>
</mat-card-actions>
</mat-card>
</inf-modal>
</form>
I am unsure of what I am missing; I have even experimented with the pristine and dirty properties of ngForm.