CSS
/* Add your custom CSS styles here */HTML Markup
<div class="container-fluid">
<h2>User Profile Form</h2>
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
{{registrationForm.value|json}}
<div class="form-group">
<label>Username</label>
<input [class.is-invalid]="registrationForm.get('userName').invalid && registrationForm.get('userName').touched"
formControlName="userName" type="text" class="form-control">
</div>
<div class="form-group">
<label>Password</label>
<input formControlName="password" type="password" class="form-control">
</div>
<div class="form-group">
<label>Confirm Password</label>
<input formControlName="confirmPassword" type="password" class="form-control">
</div>
<div formGroupName="address">
<div class="form-group">
<label>City</label>
<input formControlName="city" type="text" class="form-control">
</div>
<div class="form-group">
<label>State</label>
<input formControlName="state" type="text" class="form-control">
</div>
<div class="form-group">
<label>Postal Code</label>
<input formControlName="postalCode" type="text" class="form-control">
</div>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!registrationForm.valid">Register</button>
<button (click)="loadApiData()" class="btn btn-secondary" type="button">Load API Data</button>
</form>
</div>
TypeScript File
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
selector: 'app-user-profile-form',
templateUrl: './user-profile-form.component.html',
styleUrls: ['./user-profile-form.component.css']
})
export class UserProfileFormComponent implements OnInit {
registrationForm: FormGroup;
constructor(private fb: FormBuilder) {
this.registrationForm = this.fb.group({
userName: ['JohnDoe', Validators.required],
password: [''],
confirmPassword: [''],
address: this.fb.group({
city: [''],
state:[''],
postalCode:['']
})
});
}
ngOnInit(): void {
}
onSubmit() {
console.warn(this.registrationForm.value);
}
loadApiData(){
this.registrationForm.setValue({
userName: '',
password: '12345',
confirmPassword: '12345',
address: {
city: 'New York',
state: 'NY',
postalCode:'10001'
}
})
}
}
Having trouble with validation in Angular 12? The error message reads:
Error: user-profile-form/user-profile-form.component.html:9:67 - error TS2531: Object is possibly 'null'.
9 <input [class.is-invalid]="registrationForm.get('userName').invalid && registrationForm.get('userName').touched"
~~~~~~~
user-profile-form/user-profile-form.component.ts:6:16
6 templateUrl: './user-profile-form.component.html',
Error occurs in the template of component UserProfileFormComponent.
Error: user-profile-form/user-profile-form.component.html:9:111 - error TS2531: Object is possibly 'null'.
9 <input [class.is-invalid]="registrationForm.get('userName').invalid && registrationForm.get('userName').touched"
~~~~~~~
user-profile-form/user-profile-form.component.ts:6:16
6 templateUrl: './user-profile-form.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component UserProfileFormComponent.
Looking for a fix? Check your code and ensure proper implementation of form validation rules.