How to display error for field that haven't been "touched" on submit - html

Question

I've an angular login, with reactive form:
public form = this.fb.group({
email: ['', [Validators.required, Validators.email]],
name: ['', [Validators.required]],
});
When I click on submit, I do the following:
async createUser() {
if (this.form.valid) {
this.uiService.startBusyIndicator('Adding user...');
try {
await this.userSettingsService.createUser(this.form.get('name')?.value, this.form.get('email')?.value);
this.messageService.add({ severity: 'success', summary: 'User added', detail: 'User added successfully' });
} finally {
this.uiService.stopBusyIndicator();
this.form.reset();
}
} else {
console.log('Marking everything as touched');
this.form.markAllAsTouched();
}
}
Here is my form:
<p-dialog header="Add user" [(visible)]="displayAddForm" [modal]="true">
<form [formGroup]="form" (ngSubmit)="createUser()">
<div class="grid formgrid p-fluid">
<div class="field mb-4 col-12">
<label [for]="name" class="font-medium text-900"> {{ 'account.fields.name' | translate }}</label>
<input required pInputText formControlName="name" #name />
<app-field-errors
[formField]="form.controls['name']"
[fieldName]="'account.fields.name' | translate"></app-field-errors>
</div>
<div class="field mb-4 col-12">
<label [for]="email">{{ 'account.fields.email' | translate }}</label>
<input required pInputText formControlName="email" #email />
<app-field-errors
[formField]="form.controls['email']"
[fieldName]="'account.fields.email' | translate"></app-field-errors>
</div>
</div>
<div class="grid">
<button pButton type="submit" class="col-6 col-offset-6">Add user</button>
</div>
</form>
</p-dialog>
When I click on submit with having nothing as input, nothing changes, my fields still have the ng-pristine and not the ng-dirty classes?
I also tried to call this.form.markAsDirty(); but same result.

Answer 1

While testing I found that if I type some letters and remove them from input fields, they do get highlighted in red, which led to me to the realization that required validator doesn't effect the input fields, if you don't mark them as dirty, when they are in pristine state.
So, if you mark them accordingly, it should work for you, as you can see in this simplified Stacblitz example
component.ts:
form: FormGroup;
displayAddForm = true;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
email: ['', [Validators.required, Validators.email]],
name: ['', [Validators.required]]
});
}
async createUser() {
if (this.form.valid) {
alert('valid form');
} else {
console.log('Marking everything as touched');
this.form.markAllAsTouched();
for (const key of Object.keys(this.form.controls)) {
if(this.form.controls[key].value.length === 0) {
console.log('blank value');
this.form.controls[key].markAsDirty();
}
}
}
}
component.html:
<p-dialog header="Add User" [(visible)]="displayAddForm" [modal]="true">
<form [formGroup]="form" (ngSubmit)="createUser()">
<div class="grid formgrid p-fluid">
<div class="field mb-4 col-12">
<label [for]="name" class="font-medium text-900"> Name</label>
<input required pInputText formControlName="name" #name />
<div class="error"
*ngIf="form.controls['name'].touched && form.controls['name'].invalid">Name required</div>
</div>
<div class="field mb-4 col-12">
<label [for]="email">Email</label>
<input required pInputText formControlName="email" #email />
<div class="error"
*ngIf="form.controls['email'].touched && form.controls['email'].invalid">Email required</div>
</div>
</div>
<div class="grid">
<button pButton type="submit" class="col-6 col-offset-6">Add user</button>
</div>
</form>
</p-dialog>
Result (after clicking Add User, without touching any of the input fields):