HTML Form field not showing touched status - Angular 7 - html

Question

I am trying to input some data in a form, but it is not giving me the touched status. Therefore, an error will always occur when sending a message back to the user.
I am using FormBuilder in my TS file to store the values from the HTML. It gives me this error regardless if I put in data or not.
I am lost.
The error
firstName: FormControl {validator: ƒ, asyncValidator: ƒ, _onCollectionChange:
ƒ, pristine: true, touched: false, …}
Value:
value: {firstName: "", .... }
I have tried to check for pristine in the ngIf condtion, but it doesn't.
Here is my HTML code:
<form [formGroup]="formInfo" (ngSubmit)="validateForm()">
<label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">
<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>
And here's my TypeScript code:
// Class Attributes
formInfo: FormGroup;
submitted = false;
success = false;
constructor(private builder: FormBuilder) { }
// Form data as an object
ngOnInit() {
this.formInfo = this.builder.group({
firstName: ['', Validators.required],
....
});
}
// Validates the form
validateForm() {
this.submitted = true;
console.log(this);
console.log(this.formInfo);
if (this.formInfo.invalid) {
return;
}
this.success = true;
}
}
I just want the form to say, you need to type in a value if the user has not. Otherwise, there will be no error message.
I have added the following code to see if there is even value in my TS file.
<form [formGroup]="formInfo" (ngSubmit)="validateForm()">
<label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">
<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>
<!-- I added this -->
<div *ngIf="submitted">
<strong>First Name</strong>
<span>{{ formInfo.controls.firstName.value }}</span>
</div>
It seems that the value is never saved into the TS.

Answer 1

formInfo.controls.firstName.pristine will be true if the user has not yet changed the value in the UI.
https://angular.io/api/forms/AbstractControl#pristine
You'll want to modify
<div *ngIf="(formInfo.controls.firstName.pristine) && (formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
to be
<div *ngIf="formInfo.controls.firstName.invalid && formInfo.controls.firstName.errors.required">Your first
name is required.</div>

Answer 2

To Solve my question you just need to change
<form [formGroup]="formInfo" (ngSubmit)="validateForm()">
<label>First Name <input type="text" maxlength="35" />
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">
<div *ngIf="(formInfo.controls.firstName.pristine) &&
(formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>
To
<form [formGroup]="formInfo" (ngSubmit)="validateForm()">
<label>First Name <input type="text" maxlength="35" formControlName="firstName">
<div *ngIf="submitted && formInfo.controls.firstName.errors" class="error">
<div *ngIf="(formInfo.controls.firstName.pristine) &&
(formInfo.controls.firstName.errors.required)">Your first
name is required.</div>
</div>
</label>
....
</form>
Sorry for the inconvenience...