2016-10-19 4 views
0

ng-model을 사용하여 캡처하는 DOM에 입력 필드가 있습니다. 내 컨트롤러에서컨트롤러의 배열에 값 밀어 넣기

, 내가 배열이 있습니다

<form> 
    <input placeholder="John" ng-model="mainCtrl.manualEntry.firstName"/> 
    <input placeholder="Smith" ng-model="mainCtrl.manualEntry.lastName"/> 
</form> 

<button type="submit" 
     ng-disabled="mainCtrl.disableForm()" 
     title="Submit">Submit 
</button> 

내가 $scope가 자동으로 사용하기 위해 모델을 업데이트한다고 생각 : 내보기에

app.controller('mainCtrl', function() { 
    // set an empty array 
    self.manualEntry = []; 

    /** 
    * ensure form validation 
    * @returns boolean - ng-disabled value 
    */ 
    self.disableForm = function() { 
     if (self.manualEntry.length <= 0) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    }; 
}); 

를, I는 입력 필드가 컨트롤러. 나는 DOM에서 dot notation을 사용하여 배열에이 값들을 넣을 것이라고 생각했다.

이 값을 업데이트하면 양식의 submit 버튼이 비활성화 된 상태로 유지됩니다. 즉, disableForm()은 true를 반환합니다.

DOM에서 변경되거나 업데이트 될 때이 값을 self.manualEntry으로 어떻게 푸시 할 수 있습니까?

+0

첫째, 컨트롤러의 이름은 NG 모델 태그에 나타나지 않아야합니다. 따라서 : ng-model = "manualEntry.firstName"이어야합니다. 너의 장애인과 같은. 그런 다음 "$ scope.manualEntry"를 사용하지 않는 이유는 무엇입니까? manualEntry.firstName과 manualEntry.lastName은 $ scope.manualEntry {firstName : '', lastName : ''}와 같은 객체를 가지고 있기 때문에 –

+1

왜 객체 대신 배열을 사용하고 있습니까? –

+0

@ M.Be OP는 범위 대신 컨트롤러를 사용합니다. 완벽하게 유효하고 권장되는 옵션입니다. –

답변

0

나는 당신이 원하는 것에 대해 큰 가정을하고 있지만 정규 양식 유효성 검사가 이것을위한 방법이라고 생각됩니다. 데모 : http://plnkr.co/edit/Nzmk3R8eU0fmbBZRrTBa?p=info.

컨트롤러 코드

VAR 앱 angular.module = ('plunker'[]);

app.controller('MainCtrl', function($scope) { 
    // set an empty array 
    var self = this; 
    self.manualEntry = {}; 

    //Let HTML5 handle the form validation itself 
    self.printInfo = function() { 
    console.log(self.manualEntry); 
    }; 
}); 

HTML 코드 :

<body ng-controller="MainCtrl as mainCtrl"> 
    <form ng-submit="mainCtrl.printInfo()"> 
    <input placeholder="John" ng-model="mainCtrl.manualEntry.firstName" ng-required="true" /> 
    <input placeholder="Smith" ng-model="mainCtrl.manualEntry.lastName" ng-required="true" /> 

    <button type="submit" title="Submit">Submit 
    </button> 
    </form> 
</body>