Tips to organize better Reactive Forms in Angular

  1. Group your form controls
getPollFormGroup(): FormGroup {     
return new FormGroup({
firstName: new FormControl([Validators.required]),
lastName: new FormControl([Validators.required]),
isFreshman: new FormControl(true),
freshmanForm: this.getFreshmanFormGroup(),
mathematicsForm: this.getSubjectFormGroup(),
programmingForm: this.getSubjectFormGroup(),
englishForm: this.getSubjectFormGroup()
})
}
getSubjectFormGroup(): FormGroup {
return new FormGroup({
subjectRating: new FormControl([Validators.required]),
professorRating: new FormControl([Validators.required]),
difficultiesUnderstanding: new FormControl(),
opinion: new FormControl()
})
}
getFreshmanFormGroup(): FormGroup {
return new FormGroup({
gapsSubjects: new FormControl([Validators.required]),
changes: new FormControl([Validators.required]),
improvements: new FormControl([Validators.required])
})
}
getNonGroupedPollFormGroup(): FormGroup {     
return new FormGroup({
firstName: new FormControl([Validators.required]),
lastName: new FormControl([Validators.required]),
isFirstYear: new FormControl(true),
freshmanForm: this.getFreshmanFormGroup(),
mathematicsForm: this.getSubjectFormGroup(),
mathematicsRating: new FormControl([Validators.required]),
mathematicsProfessorRating: new FormControl([Validators.required]),
mathematicsDifficultiesUnderstanding: new FormControl(),
mathematicsOpinion: new FormControl(),
programmingRating: new FormControl([Validators.required]),
programmingRatingProfessorRating: new FormControl([Validators.required]),
programmingRatingDifficultiesUnderstanding: new FormControl(),
programmingRatingOpinion: new FormControl(),
englishRating: new FormControl([Validators.required]),
englishProfessorRating: new FormControl([Validators.required]),
englishDifficultiesUnderstanding: new FormControl(),
englishOpinion: new FormControl()
})
}
<app-subject-form         
[form]="form.get('programmingForm')">
</app-subject-form>
<app-subject-form
[form]="form.get('englishForm')">
</app-subject-form>
ngOnInit() {   
this.form.get('programmingForm.subjectRating').valueChanges.
pipe(filter(v => v != null))
.subscribe(this.programmingRatingInterceptor);
}
programmingRatingInterceptor = (rating: number): void => {
if (rating < 3) {
console.log('We are sorry you share this opinion!');
}
}

--

--

--

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

SAAS and media query

String upgrades in Javascript

String upgrades in Javascript

Canvas with React.js

Free Food With React

Getting Instructions Pop-up to work for User Flow

Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

JavaScript Basics: Conditional Statements

How to use Tailwind CSS with React

Tailwind CSS logo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AG Dev

AG Dev

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

More from Medium

Simple Toast Notification in Angular

Unit Testing in Angular(Part 1)

Working with Angular

Migrating Angular application from TsLint to EsLint