Ada School Frontend Challenge

This is a solution to an Ada School repo.

Built With

• Angular
• Angular CLI version 17.3.2.
• Angular In Memory Web API

Thoughts

• The structure of a template model does not need to match the TypeScript model.
• You can be creative and use this fact to your advantage to make some validation checks easier.
• You have to test a template driven form by interacting with the DOM.
• Step is hit and miss in a time input. It seems like it should work, but compatibility was changed at one point. Across multiple browsers, it can vary. I need to do more research, but this could be problematic. I don't want to have to create a separate step function.
• Using the in-memory web API, I think it is important to use JSON.
• I was using a FormData object and the POST request returned {id: 3} only (Booking collection starts with 2 objects).
• I am using code I found on Stack Overflow and it uses reqInfo.utils.getJsonBody(reqInfo.req). I need look into more methods I can use. Maybe, I don't have to convert my FormData into JSON.
• Using different names for the form controls can add extra snags. Sending FormData is usually not problematic with real backends.
• You can use interceptors with the in-memory web API.
• bookingForm.controls['formSelect']?.touched && bookingForm.controls['formSelect']?.errors?.['required'] throws a warning in the template, but if you don't include ? after the control, you get an error in the browser. You can suppress the warning in the tsconfig.json file.
• RouterTestingModule is deprecated.

Continued Development

• Tests

How to Use

# Clone this repository
$ git clone https://github.com/jdegand/ada-school-frontend-challenge.git

# Install dependencies
$ npm install

# Run the app and navigate to localhost:4200
$ npm start

# Run the tests (Firefox launcher is installed)
$ ng test --code-coverage

Useful Resources

• Angular Docs - forms
• StackBlitz - hero form
• Angular University - introduction to angular 2 forms template driven vs model driven
• Medium - template driven form in angular
• BezKoder - angular 17 template driven form validation
• Blog - practical guide to angular template driven forms
• Blog - angular template driven forms with signals
• Dev.to - signal queries in angular what can i do with them
• Stack Overflow - html input time step attribute to set timestep by say x minutes
• Dev.to - template forms are just as powerful as reactive forms
• Angular Docs - tour of heroes part 6
• Stack Overflow - anyone try using inmemorywebapi with standalone components
• Stack Overflow - error collection not found while using in memory web api
• Stack Overflow - correct way to do a put or post in angular in memory web api
• Stack Overflow - formdata append not working
• Stack Overflow - angular form data wont append
• Stack Overflow - how to use the angular in memory web api data attribute
• Blog - template driven form validators
• Stack Overflow - date and currency validation in angular 4
• Medium - angular standalone components 02 standalone directives
• Stack Overflow - angular 2 jasmine test whether an element is visible
• Medium - simulating event in angular unit tests
• Stack Overflow - unit testing click event in angular
• YouTube - Part 42- Angular Unit test case on template driven form |Angular unit test case Tutorials
• Stack Overflow - spec has no expectation console error although expect is present
• Stack Overflow - faking out formdata append with jasmine