From 89954fe1f832b97f02087e87384ede49e3df0260 Mon Sep 17 00:00:00 2001
From: Dylan Hunn <dylhunn@gmail.com>
Date: Wed, 26 May 2021 18:34:42 -0700
Subject: [PATCH] docs(forms): make the forms validation guide specify more
 clearly what happens when mixing HTML5 native validators with Angular forms.
 (#42377)

Previously, the docs didn't say anything about the fact that the `novalidate` attribute is added to the enclosing form, or how to override that behavior. I have added a couple lines in the appropriate spot clarifying this issue.

PR Close #42377
---
 .../app/profile-editor/profile-editor.component.html   |  2 --
 aio/content/guide/form-validation.md                   |  4 ++++
 aio/content/guide/reactive-forms.md                    | 10 ----------
 3 files changed, 4 insertions(+), 12 deletions(-)

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 @@
 <!-- #enddocregion ng-submit -->
   <label>
     First Name:
-    <!-- #docregion required-attribute -->
     <input type="text" formControlName="firstName" required>
-    <!-- #enddocregion required-attribute -->
   </label>
 
   <label>
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 `<form>` 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
 
 </code-example>
 
-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.
-
-<code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="required-attribute" header="src/app/profile-editor/profile-editor.component.html (required attribute)"></code-example>
-
-<div class="alert is-important">
-
-**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.
-
-</div>
-
 **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.