docs(forms): make the forms validation guide specify more clearly wha…

…t 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

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>

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.

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.