I am looking to incorporate a reactive form validation system in my application, and I want to display error messages based on the specific error. However, I am encountering an error that says: object is possibly 'null'.
signup.component.html
<form [formGroup]="form">
<div class="form-group">
<label for="username">Username</label>
<input
formControlName="username"
class="form-control"
id="username"
type="text">
<div class="alert alert-danger" *ngIf="username?.touched && username?.invalid">
<div *ngIf="username.errors.required">username is required !</div>
<div *ngIf="this.form.controls['username'].errors?.minlength">username must have at least {{ username.errors.minlength.requiredLength }} characters</div>
</div>
</div>
</form>
signup.component.ts
form = new FormGroup({
username: new FormControl('',[
Validators.required,
Validators.minLength(3),
]),
})
get username(){
return this.form.get('username')
}