Missing [disable] in buttons (from chapter 8)

[Visar78]

In files city-edit.component.html and country-edit.component.html there is no [disable]="!form.valid" in button element (type="submit"). So all validators are active, they show errors but you can submit bad values into database. (fe. country without name, without iso2 and iso3).

[Darkseal]

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.

[Darkseal]

EDIT: replaced [disable] with [disabled] (see #2 - thanks @Mike-Guidry for the nice catch!).