Comment faire pour que la validation de angular.js fonctionne à l'intérieur d'une balise <form>

Question

J'ai écrit ce code mais cela ne fonctionne pas lorsque je place mon application à l'intérieur du tag <form name="myForm">.... Que dois-je faire pour que ça marche! (Chaque fois que je place myForm à l'intérieur de ng-app cela fonctionne, mais mon application doit être à l'intérieur de <form>)

<form name="myForm"> 
    <div ng-app ng-init="myInput = 'ABC'"> 
     <input name="myInput" ng-model="myInput" required> 
     <h1>{{myForm.myInput.$valid}}</h1> 
    </div> 
</form> 

jsfiddle

Answer 1

Vous pouvez utiliser la directive ngForm (ici) afin de permettre aux services de validation en son sein:

Comme ceci:

<div ng-app="" ng-controller="validateCtrl" name="myForm" novalidate ng-form> 

Answer 2

Vous avez eu tag ng-app dans form tag. Donc c'est la raison form tag avec myForm ne se compile pas par angulaire et myForm ne serait pas disponible dans la portée angulaire.

Vous devez déplacer ng-app au top parent le plus, la plupart du temps étiquette html/body afin que vous assurer que tout a été compilé par & angulaire va rester à l'intérieur contexte angulaire.

<form ng-app name="myForm"> 
    <div ng-init="myInput = 'ABC'"> 
     <input name="myInput" ng-model="myInput" required> 
     <h1>{{myForm.myInput.$valid}}</h1> 
    </div> 
</form> 

Forked Fiddle

Ce ne est pas bonne idée de créer une application angulaire sans modules. Idéalement, le module & doit fournir ce module à l'intérieur de la directive ng-app. Je suppose que vous apprenez c'est pourquoi vous l'avez eu là.