AngularJS：コントローラのバリデータはHTML側とバインドしません

Question

HTML側のすべてのインライン検証は正常ですが、コントローラ（関数ingresarNuevoEmpleadorおよびlimpiarNuevoEmpleador）で関数を使用すると、常に$ invalid = trueを取得します。 $ setPristineはどちらも動作しません。 コントローラー関数 はHTML側のバリデーターの状態を変更しないため、明らかに両側が異なるオブジェクトを参照しています。

<form name="frmEmpleadorDirecto" novalidate> 
    <div class="row"> 
     <div class="col-xs-8 col-sm-8"> 
     <div class="form-group has-feedback" 
     ng-class="{'has-error': frmEmpleadorDirecto.nempleador.$invalid && (frmEmpleadorDirecto.nempleador.$touched || frmEmpleadorDirecto.$submitted)}"> 
      <label for="input501">Empleador Directo</label> 
      <input type="text" class="form-control text-uppercase" name="nempleador" placeholder="Nombre Empleador" ng-model="objEmpleador_.nombreEmpleador_" ng-minlength="2" ng-maxlength="30" ng-required="true"> 
      <span class="help-block" ng-if="frmEmpleadorDirecto.nempleador.$error.minlength && frmEmpleadorDirecto.nempleador.$touched">too short</span> 
      <span class="help-block" ng-if="frmEmpleadorDirecto.nempleador.$error.maxlength && frmEmpleadorDirecto.nempleador.$touched">too long</span> 
      <span class="help-block" ng-if="frmEmpleadorDirecto.nempleador.$error.required && frmEmpleadorDirecto.nempleador.$touched">required</span> 
      </div> 
     </div> 
     </div> 
     <div class="text-right"> 
     <button type="submit" class="btn btn-success btn-mm" ng-disabled="frmEmpleadorDirecto.$pristine || frmEmpleadorDirecto.$invalid" ng-click="ingresarNuevoEmpleador()">Aceptar</button> 
     <button type="button" class="btn btn-warning btn-mm" ng-click="limpiarNuevoEmpleador()">Limpiar</button> 
    </div> 
    </form> 

コントローラー：

angular.module('BlurAdmin.pages.empleador_') 
     .controller('CtrlEmpleadorNuevo',CtrlEmpleadorNuevo); 

function CtrlEmpleadorNuevo($scope,$http,$rootScope) { 

    $scope.objEmpleador_ = new eva.Empleador_(); 


    $scope.ingresarNuevoEmpleador = function() 
    { 
    console.log("Nombre: " + $scope.objEmpleador_.nombreEmpleador_); //OK 
     if($scope.objEmpleador_.$valid) //always invalid 
     { 

     console.log('valid!'); 
     }else { 
      console.log('invalid!');  } 

    } 

    $scope.limpiarNuevoEmpleador = function() 
    { 

     $scope.objEmpleador_.$setPristine; //no changes 
     $scope.objEmpleador_.nombreEmpleador_ = ''; //Works: reset html field 

    } 
} 

オブジェクト：

eva.Empleador_ = function() { 
    var self = this; 
    self.nombreEmpleador_ = ''; 
}; 

Answer 1

フォームはあなたの$の範囲や入力に結合させ、その有効性は、name属性以下に到達することができます。

$scope.ingresarNuevoEmpleador = function(){ 
    console.log("Nombre: " + $scope.objEmpleador_.nombreEmpleador_); //OK 
     if($scope.frmEmpleadorDirecto.nempleador.$valid) { 
     console.log('valid!'); 
     }else { 
      console.log('invalid!');   
     } 

    }; 

Plunker