Comments (2)
Nice catch. I've used the [disable] attribute approach in the previous editions of the book, but it seems like I've forgot to add that behavior in this edition.
I think this should be fixed in Chapter 7, when we first introduce the client-side validators, replacing the following content (PDF page 324):
Not bad, right? The input errors couldn't be more visible, and the Create button will stay disabled until they are all fixed, thus preventing accidental submits. All of these colored warnings should help our users understand what they're doing wrong and fix these issues.
With the following content:
Not bad, right? The input errors couldn't be more visible: all of these colored warnings should help our users understand what they're doing wrong and fix these issues.
However, notice how the form’s Create button is still enabled - even when those validators are showing an error: this is not a good behavior, since it allows the user to submit the form with invalid data. To prevent that, we need to disable the Create button until the form is valid, which can be done by adding a [disable] attribute to the form’s submit button in the following way:
<button mat-flat-button color="primary"
type="submit"
[disable]="!form.valid">
This will ensure that the Create button will stay disabled until all the validators give a positive (valid) response, thus preventing accidental submits.
This, together with the code fix (which I've just pushed in the repo) in all the edit components from Chapter 7 onwards, should fix the issue, at least from the client-side. The server side issue is another story (we should also add a [Required] ASP.NET attribute to the model classes to shield the Web API from client-side hacks) - I'll think about adding something about that as well.
from asp.net-core-6-and-angular.
EDIT: replaced [disable] with [disabled] (see #2 - thanks @Mike-Guidry for the nice catch!).
from asp.net-core-6-and-angular.
Related Issues (9)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from asp.net-core-6-and-angular.