After creating a form with 20 fields, I encountered an issue. Out of those fields, there are 10 mandatory ones. When attempting to submit the form, only the mandatory input fields display a red border without showing an error message. Despite this, the submission still successfully sends data to the server.
input.submitted.ng-invalid
{
border:1px solid #f00;
}
form.submitted .ng-invalid
{
border:1px solid #f00;
}
input.ng-touched.ng-invalid {
border-color:red;
}
input.ng-touched.ng-valid {
border-color:green;
}
this.form = this.formBuilder.group({
Logo: [null, [Validators.required]], TournamentType: [null, Validators.required],
TournamentName: [null, Validators.required], TournamentStartDate: [null, [Validators.required]],
TournamentEndDate: [null, [Validators.required]], StarStatus: [null, [Validators.required]],
EntryStartDate: [null, [Validators.required]], EntryEndDate: [null, [Validators.required]],
Venue: [null, [Validators.required]], Address: [null, [Validators.required]],
enfee: [null, [Validators.required]], PlayersCategory: [null, [Validators.required]],
latitude: [null, [Validators.required]], longitude: [null, [Validators.required]]
});
This is how it appears in my HTML:
<div class="form-group" [formGroup]="form">
<label class="lable label-default">Logo<span style="color: red">*</span></label><br>
<img [src]='imageURl' style='width:160px;height:140px;'>
<input type="file" id='Logo' formControlName="Logo" name="Logo" style="margin-top:10px" accept="image/*"
(change)="handleFileInput($event)"
[ngClass]="{'form-submitted': formSubmitted}" [(ngModel)]='tourDetails.Logo' required />
</div>
<div class="form-group" [formGroup]="form">
<label class="label label-default" for="tour-type">Tournament Type<span style="color: red">*</span></label>
<select id="TournamentType" formControlName="TournamentType" class="form-control" [(ngModel)]="tourDetails.TournamentType"
name='TournamentType' [ngClass]="{'form-submitted': formSubmitted}"
required>
<option value='' selected>Select</option>
<option *ngFor="let TT of tourType" value={{TT.value}}>{{TT.name}}</option>
</select>
</div>
<div class="form-group" [formGroup]="form">
<label class="lable label-default">Tournament Name<span style="color: red">*</span></label>
<input id="TournamentName" class="form-control" name='TournamentName' formControlName="TournamentName"
[(ngModel)]='tourDetails.TournamentName' [ngClass]="{'form-submitted': formSubmitted}"
required />
</div>
<div class="form-group inputWithIcon" [formGroup]="form">
<label class="lable label-default">Tournament Start Date<span style="color: red">*</span></label>
<input class="form-control input-wrapper " bsDatepicker type="text" name='TournamentStartDate'
[(ngModel)]="tourDetails.TournamentStartDate" autocomplete='off' [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }"
[outsideClick]="true" [maxDate]='tourDetails.TournamentEndDate'
formControlName="TournamentStartDate" [ngClass]="{'form-submitted': formSubmitted}" required>
</div>
<div class="form-group inputWithIcon" [formGroup]="form">
<label class="lable label-default">Tournament End Date<span style="color: red">*</span></label>
<input class="form-control input-wrapper" bsDatepicker type="text" name='TournamentEndDate'
[(ngModel)]="tourDetails.TournamentEndDate" autocomplete='off' [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }"
[outsideClick]="true" [minDate]='tourDetails.TournamentStartDate'
formControlName="TournamentEndDate" [ngClass]="{'form-submitted': formSubmitted}" required>
</div>
The desired outcome: Upon clicking the submit button, the form should prevent submission if any mandatory fields are left empty. Additionally, the mandatory input fields ought to display an error message saying "Please fill this required field" along with a red border around them.