Forms Implementation Skill
Quick Start
Template-Driven Forms
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-contact',
template: `
<form #contactForm="ngForm" (ngSubmit)="onSubmit(contactForm)">
<input
[(ngModel)]="model.name"
name="name"
required
minlength="3"
/>
<input
[(ngModel)]="model.email"
name="email"
email
/>
<button [disabled]="!contactForm.valid">Submit</button>
</form>
`
})
export class ContactComponent {
model = { name: '', email: '' };
onSubmit(form: NgForm) {
if (form.valid) {
console.log('Form submitted:', form.value);
}
}
}
Reactive Forms
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-user-form',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="name" placeholder="Name" />
<input formControlName="email" type="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Register</button>
</form>
`
})
export class UserFormComponent implements OnInit {
form!: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
name: ['', [Validators.required, Validators.minLength(3)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8)]]
});
}
onSubmit() {
if (this.form.valid) {
console.log(this.form.value);
}
}
}
Form Controls
FormControl
// Create standalone control
const nameControl = new FormControl('', Validators.required);
// Get value
nameControl.value
// Set value
nameControl.setValue('John');
nameControl.patchValue({ name: 'John' });
// Check validity
nameControl.valid
nameControl.invalid
nameControl.errors
// Listen to changes
nameControl.valueChanges.subscribe(value => {
console.log('Changed:', value);
});
FormGroup
const form = new FormGroup({
name: new FormControl('', Validators.required),
email: new FormControl('', [Validators.required, Validators.email]),
address: new FormGroup({
street: new FormControl(''),
city: new FormControl(''),
zip: new FormControl('')
})
});
// Access nested controls
form.get('address.street')?.setValue('123 Main St');
// Update multiple values
form.patchValue({
name: 'John',
email: 'john@example.com'
});
FormArray
const form = new FormGroup({
name: new FormControl(''),
emails: new FormArray([
new FormControl(''),
new FormControl('')
])
});
// Dynamic form array
const emailsArray = form.get('emails') as FormArray;
// Add control
emailsArray.push(new FormControl(''));
// Remove control
emailsArray.removeAt(0);
// Iterate
emailsArray.controls.forEach((control, index) => {
// ...
});
Validation
Built-in Validators
import { Validators } from '@angular/forms';
new FormControl('', [
Validators.required,
Validators.minLength(3),
Validators.maxLength(50),
Validators.pattern(/^[a-z]/i),
Validators.email,
Validators.min(0),
Validators.max(100)
])
Custom Validators
// Simple validator
function noSpacesValidator(control: AbstractControl): ValidationErrors | null {
if (control.value && control.value.includes(' ')) {
return { hasSpaces: true };
}
return null;
}
// Cross-field validator
function passwordMatchValidator(group: FormGroup): ValidationErrors | null {
const password = group.get('password')?.value;
const confirm = group.get('confirmPassword')?.value;
return password === confirm ? null : { passwordMismatch: true };
}
// Usage
const form = new FormGroup({
username: new FormControl('', noSpacesValidator),
password: new FormControl(''),
confirmPassword: new FormControl('')
}, passwordMatchValidator);
Async Validators
function emailAvailableValidator(service: UserService): AsyncValidatorFn {
return (control: AbstractControl): Observable<ValidationErrors | null> => {
if (!control.value) {
return of(null);
}
return service.checkEmailAvailable(control.value).pipe(
map(available => available ? null : { emailTaken: true }),
debounceTime(300),
first()
);
};
}
// Usage
new FormControl('', {
validators: Validators.required,
asyncValidators: emailAvailableValidator(userService),
updateOn: 'blur'
});
Form State
const control = form.get('email')!;
// Pristine/Dirty
control.pristine // Not modified by user
control.dirty // Modified by user
// Touched/Untouched
control.untouched // Never focused
control.touched // Focused at least once
// Valid/Invalid
control.valid
control.invalid
control.errors
control.pending // Async validation in progress
// Status
control.status // 'VALID' | 'INVALID' | 'PENDING' | 'DISABLED'
// Value
control.value
control.getRawValue() // Include disabled controls
Form Display
Showing Errors
<div *ngIf="form.get('email')?.hasError('required')">
Email is required
</div>
<div *ngIf="form.get('email')?.hasError('email')">
Invalid email format
</div>
<div *ngIf="form.get('email')?.hasError('emailTaken')">
Email already in use
</div>
Dynamic Forms
@Component({
template: `
<form [formGroup]="form">
<div formArrayName="items">
<div *ngFor="let item of items.controls; let i = index">
<input [formControlName]="i" />
<button (click)="removeItem(i)">Remove</button>
</div>
</div>
<button (click)="addItem()">Add Item</button>
</form>
`
})
export class DynamicFormComponent {
form!: FormGroup;
get items() {
return this.form.get('items') as FormArray;
}
addItem() {
this.items.push(new FormControl('', Validators.required));
}
removeItem(index: number) {
this.items.removeAt(index);
}
}
Advanced Patterns
FormBuilder Groups
this.form = this.fb.group({
basicInfo: this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
}),
address: this.fb.group({
street: [''],
city: [''],
zip: ['']
}),
preferences: this.fb.array([])
});
Directives for Template Forms
<form #form="ngForm">
<input
[(ngModel)]="user.name"
name="name"
required
minlength="3"
#nameField="ngModelGroup"
/>
<div *ngIf="nameField.invalid && nameField.touched">
<p *ngIf="nameField.errors?.['required']">Required</p>
<p *ngIf="nameField.errors?.['minlength']">Min length 3</p>
</div>
</form>
Testing Forms
describe('UserFormComponent', () => {
let component: UserFormComponent;
let fixture: ComponentFixture<UserFormComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [UserFormComponent],
imports: [ReactiveFormsModule]
}).compileComponents();
fixture = TestBed.createComponent(UserFormComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should submit valid form', () => {
component.form.patchValue({
name: 'John',
email: 'john@example.com'
});
expect(component.form.valid).toBe(true);
});
it('should show error on invalid email', () => {
component.form.get('email')?.setValue('invalid');
expect(component.form.get('email')?.hasError('email')).toBe(true);
});
});
Best Practices
- Reactive Forms for Complex: Use for validation, computed fields
- Template Forms for Simple: Use for simple, data-binding heavy forms
- Always validate: Server and client validation
- Disable submit until valid: Better UX
- Show errors appropriately: After touched/dirty
- Handle async validation: Debounce, cancel on unsubscribe
- Test forms thoroughly: Validation, submission, edge cases
Resources
majiayu000