Controller 'AngularJS' come 'e form. $ Valido

Question

Voglio verificare se un modulo è valido all'interno di un controller angolare. Questo sembra semplice quando si usa $ scope, ma non riesco a farlo funzionare con la sintassi 'controller as'.

Quando si tenta di accedere al modulo. $ Valido Viene visualizzato il messaggio di errore "Impossibile leggere la proprietà '$ valido' di non definito".

plunkr: http://plnkr.co/edit/w54i1bZVD8UMhxB4L2JX?p=preview

HTML

<div ng-app="demoControllerAs" ng-controller="MainController as main"> 
    <form name="contactForm" novalidate> 
    <p> 
     <label>Email</label> 
     <input type="email" name="email" ng-model="main.email" required /> 
    </p> 
    <p> 
     <label>Message</label> 
     <textarea name="message" ng-model="main.message" required></textarea> 
    </p> 
    <input type="submit" value="submit" ng-click="main.submit()" /> 
    </form> 
</div> 

JS

var app = angular.module('demoControllerAs', []); 

app.controller('MainController', [function() { 
    var main = this; 

    main.submit = function() { 
     var isValid = main.contactForm.$valid; 
     console.log(isValid); 
    }; 
}]); 

Answer 1

Si potrebbe fare come @ on-jjss suggerito, ma se si preferisce non iniettare $scope in voi controllore, poi basta cambiare il nome form come

<form name="main.contactForm" novalidate> 

e funzionerà come un fascino .

Answer 2

È necessario utilizzare in questo modo: $scope.contactForm.$valid

EDIT

Per eseguire la sintassi precedente, $ scope deve essere inserito nel controller.

app.controller('MainController', function($scope) { 
    //code 
} 

Answer 3

È possibile passare il modulo come un parametro di funzione di presentare come ng-clic = "main.submit (ContactForm)

e poi convalidare in metodo di controllo

Answer 4

È necessario utilizzare main.contactForm in nome modulo di attributo allora è risolto. Vai a questa

`http://plnkr.co/edit/us8MKU3LZ7pnLV66xIrv?p=preview`