diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html index fcf50e2c9496a..20688484e3c8f 100644 --- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html +++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html @@ -4,9 +4,7 @@ First Name: - - diff --git a/aio/content/guide/form-validation.md b/aio/content/guide/form-validation.md index a66c2a9150789..688b0b7feb435 100644 --- a/aio/content/guide/form-validation.md +++ b/aio/content/guide/form-validation.md @@ -351,3 +351,7 @@ With reactive forms, set the property in the `FormControl` instance. ```typescript new FormControl('', {updateOn: 'blur'}); ``` + +## Interaction with native HTML form validation + +By default, Angular disables [native HTML form validation](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation) by adding the `novalidate` attribute on the enclosing `` and uses directives to match these attributes with validator functions in the framework. If you want to use native validation **in combination** with Angular-based validation, you can re-enable it with the `ngNativeValidate` directive. See the [API docs](https://angular.io/api/forms/NgForm#native-dom-validation-ui) for details. diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md index 6f35ed965b2c8..56633c39bfccb 100644 --- a/aio/content/guide/reactive-forms.md +++ b/aio/content/guide/reactive-forms.md @@ -379,16 +379,6 @@ In the `ProfileEditor` component, add the `Validators.required` static method as -HTML5 has a set of built-in attributes that you can use for native validation, including `required`, `minlength`, and `maxlength`. You can take advantage of these optional attributes on your form input elements. Add the `required` attribute to the `firstName` input element. - - - - - -**Caution:** Use these HTML5 validation attributes *in combination with* the built-in validators provided by Angular's reactive forms. Using these in combination prevents errors when the expression is changed after the template has been checked. - - - **Display form status** When you add a required field to the form control, its initial status is invalid. This invalid status propagates to the parent form group element, making its status invalid. Access the current status of the form group instance through its `status` property.