Quiero usar la validación de HTML5 en Angular 4 en lugar de la validación/validación reactiva basada en su formulario. Quiero mantener la validación ejecutándose en el navegador.
Solía funcionar en Angular 2, pero desde que actualicé, ni siquiera puedo obtener formularios creados manualmente sin directivas angulares para validar usando HTML5.
Por ejemplo, esto no validará en absoluto en el navegador:
<form> <h2>Phone Number Validation</h2> <label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br /> <input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required> <input type="submit" value="Submit"> </form>Angular4 agrega automáticamente un atributo novalidate a los formularios.
Para anular esto, puede agregar la directiva ngNativeValidate al formulario.
<form ngNativeValidate> <h2>Phone Number Validation</h2> <label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br /> <input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required> <input type="submit" value="Submit"> </form>Desafortunadamente, todavía no veo esto reflejado en los documentos, pero lo encontré mirando el código fuente: https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts
Parece que también agregar ngNoForm al formulario tiene el mismo efecto que ngNativeValidate dependiendo de sus casos de uso por la necesidad de declarar algo como no un formulario por cualquier motivo.
Espero que esto ayude.
use ngNoForm o ngNativeValidate en su formulario
<form ngNoForm/ngNativeValidate> ... </form>