AngularJS에서 여러 입력 필드를 요구하려면 어떻게해야합니까?

두 입력을 가진 간단한 페이지를 작성하려고합니다.이 페이지는 required이되어야 비어 있습니다. 여기 AngularJS에서 여러 입력 필드를 요구하려면 어떻게해야합니까?

은 (자기 - 포함) 그렇게하는 코드이다 :

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script> 
      var app = angular.module("myApp", []); 
      app.controller('myController', ['$scope', function($scope) { 
      }]); 
     </script> 
     <style> 
      input.ng-invalid { 
       background-color: pink; 
      } 
      input.ng-valid { 
       background-color: lightgreen; 
      } 
     </style> 
    </head> 
    <body ng-app="myApp"> 
     <div ng-controller="myController"> 
      Description: *<input type="text" id="input-description" ng-model="req-text" required></input><br/> 
      Order: *<input type="number" id="input-order" ng-model="req-number" value="100" step="100" required></input><br/> 
     </div> 
    </body> 
</html>

내가 그것을 텍스트 필드가 빈 빨간색 (무효)되고 시작됩니다 할 것이라고 기대했다 및 숫자 필드가 100 인 및 녹색 (유효).

내가 시도한 첫 번째 일은 같은 것을 입력으로 모두 ng-model을 설정하는 것이었지만 숫자 필드가 업데이트되었을 때 텍스트 필드를 업데이트하도록 만들었지 만 다른 방법은 사용하지 않았습니다.

분명히 작동하지 않았기 때문에, 입력에 다른 코드를 사용하려고 시도했습니다. 그러나 이제는 두 입력의 값이 모두 0 (텍스트 필드조차도 비어 있어야 함)이며 두 입력을 모두 입력하거나 편집 할 수 없습니다.

무엇이 잘못 되었습니까? 그리고 두 입력을 모두 각도로 required으로 어떻게 가져 옵니까?

출처

2016-07-20 Jashaszun

무엇보다 먼저 모델에 잘못된 식별자가 사용됩니다. req-number은 변수에 대한 유효한 식별자가 아닙니다. (이 모든 모델은 실제로 $scope.variableName으로, $scope.req-number으로 상상해보십시오). 따라서 입력 내용은 읽기 전용으로 작성됩니다. 브라우저의 콘솔을 검사 할 때 실제로이를 볼 수 있습니다.

두 번째로이 html 속성 value은이 경우 input에 대해 무시됩니다. 컨트롤러 기능을 사용하여 모델의 기본값을 설정하십시오.

app.controller('myController', ['$scope', function($scope) { 
     $scope.req_number = 100; 
    }]); 
    .... 
    <div ng-controller="myController"> 
     Description: *<input type="text" ng-model="req_text" REQUIRED><br/> 
     Order: *<input type="number" ng-model="req_number" required><br/> 
    </div>

또는 당신이 모델을 시작 ng-init를 사용할 수 있습니다. 그러나 @developer0333에서 언급했듯이 초기화 로직은 비즈니스 로직의 일부이고 프로젝트 진화는 원시적 인 값을 설정하는 것보다 복잡해질 수 있기 때문에 권장하지 않습니다.

<input type="number" ng-model="req_number" ng-init="req_number=100" required><br/>

Plunker with correct code

PS 작은 발언, 닫는 태그 <input>

출처

2016-07-20 18:58:08

덕분에 많은 무시됩니다! 나는'ng-model'이 한 일에 다소 혼란스러워 보였습니다. 나는 (1) 그것이 범위에서 변수가 될 것이라는 것을 깨닫지 못했다. (2)이 변수는 입력의 값일 것이다. 나는 그 모델이 완전히 다른 것이라고 생각했다. – Jashaszun

'ngInit' 지시문은이 경우 docs에 나와 있으므로 (https://docs.angularjs.org/api/ng/directive/ngInit) 사용해야합니다. 이 경우 ** 컨트롤러 **에서 값을 시작하십시오. – developer033

@ developer033 그게 제가 보통하는 일입니다. 그러나 질문에 매우 간단한 코드와 컨트롤러가 비어 있었기 때문에'ng-init'을 제안했습니다. 내 대답에 발언을 반영하겠습니다. –

AngularJS에서 여러 입력 필드를 요구하려면 어떻게해야합니까?

답변

관련 문제