Node: v22.1.0
cd reactive-forms
npm install
npm start
# Run the tests
cd reactive-forms
npm testAngular v18:
const nameControl = new FormControl<string | null>('name', Validators.required);
nameControl.events.subscribe(event => {
// process individual events like value, touch state, prinstine status, ...
});Read the proposed exercises below and pick the ones that challenge/interest you!
- Add a FormGroup/Array validator that checks that the same color is not selected twice
- Must have at least one color with a positive amount. Amounts must always be positive.
- When ordering a certain amount of Socks of a color, do a backend call to make sure that this does not exceed the current stock (See
StockServicefor a fake backend, see2-form-builder/EmailValidatorfor an AsyncValidator example). Attention: do you want to add a Validator to the one FormArray or to each FormGroup in the FormArray?
Attention: FormBuilder & FormTesting is two times the same UI, make sure you are adding & testing with the 4-form-testing component!
- Disable Birth Date only when there is a valid INSS filled in
- Using route /form-testing/{id} if there is an id other than 'new-user', set the value of the Form to the value retrieved from the (fake) PersonService.
- Only allow filling in the INSS when adding a User. When editting, the INSS and BirthDate should be disabled.
- Likewise, the 'Accept EULA' is not visible when editting.
- Business vs Personal User:
- When deselecting "Business", clear/reset the business fields (name, tax)
- Add Required validators to Business.tax/name but only when business.active is true
- Remove business.active from the FormGroup and have business be null or the BusinessModel (addControl/removeControl)
- Change the Business checkbox into 2 radios "Business" & "Personal". They both have their own model. Set the other model to null when switching between Business/Personal
- Change address into "Main Address" and allow Invoicing & Shipping Addresses to be defined differenly (FormRecord or FormArray)
- Turn the 'Address.City' into a dropdown and limit the possibilities based on the selected Country
- Display errors in a more user friendly way (ex: "Max length of 15 has been exceeded by 3 characters")
- Translate the options in the Country dropdown when the user selects a different language in the navbar (see NavbarComponent, LanguageService and assets/i18n, use
| translatein a Component template to translate an i18n string)
Create Components:
- 'Inss' (EventEmitter for the calculated birth date!)
- 'Tax' which validates the tax nr and formats correct inputs
- 'Business' which consists of a name and a tax nr
- Wrap an npm DatePicker (ex: https://github.com/vlio20/angular-datepicker) and use it for the BirthDate
- 'Text' base component that includes the Bootstrap FormGroup and Label
- Prepend a "*" to all labels of form fields that have a required validator.
- 'Money' with Bootstrap addon '€' and formatting '0.00'