Reactive Forms

Reactive Forms as opposed to template forms.

If you want responsive validation as you fill in the form, Reactive forms are the way to go.  Infact, template forms should only really be used for very simple forms with just text controls.

Features:

Built in validators
Custom validators
FormBuilder

Invalid Feedack

 This is the text in red that appears under the controls if there are validation errors.  This needs to be ngIf guarded manually as does the 'is-invalid' class which gives the control a red border  The touched property on the control can be checked to stop the errors appearing before the user has started using the control.

Datepicker

To get a uniform experience across browsers, it best to use the ngx-bootstrap datepicker control.

Time Ago Pipe

 pipe package to provide the time ago.  This doesn't work for Angular 9, so currently can only be used with Angular 8.

There is an open issue and raised on stack overflow .  used ngx-timeago instead.

Comments

Post a Comment

Popular posts from this blog

Understanding the technologies - Angular 8 and ASP.NET Web API Core 3

Course Notes Yesterday, I followed some of the preview lessons and have taken the following points: Instead of using a Visual Studio template to create an integrated Angular and WebAPI project, I'm going to the follow the advice on the course to create these separately.  I'll use dotnet CLI to create the web API project and Angular CLI (ng) to create the separate Angular project. The following needed to be installed as prerequisites: .NET Core SDK V3.0 - This is required to create the WEB API project To check all that are installed - >dotnet --info To check the default version - >dotnet --version I already had V3.1 of the SDK installed so needed to switch back to the earlier version : NodeJS V12.16.3 - This is required to serve and run the Angular App NPM V6.14.5 - This is used to add libraries for for the Angular App (like nuget) I'm also going to be using VS Code rather than Visual Studio Community as my IDE.   I want to see how this work in ...
Read more

Bits and bobs

EF Global Filters These can be set up in OnModelCreating so that the default case is that the deleted items are not returned.  This can be overriden for specific queries using IgnoreQueryFilters. builder.Entity<Thing>().HasQueryFilter(p => p.Deleted); Displaying text over an Image For this we need to set the container div style to  position: relative and then the text to position: absolute.  Then set the bottom so that it appears in the corrrect place.
Read more