AngularJS : 입력 필드가 비어있을 때 버튼을 사용하지 않음

Question

드롭 다운 메뉴, 입력 텍스트 상자 2 개 및 제출 버튼이 있습니다. 드롭 다운 항목을 선택하고 두 입력 상자를 모두 채울 때까지 제출 단추를 사용할 수 없게하려고합니다. this one과 this one을 비롯한 몇 가지 예를 살펴 보았지만 이들 중 어느 것도 저에게 효과적이지 않습니다. 아래는 제 코드입니다. 감사합니다

<form name="myForm"> 
    Select an option: 
    <select id="dropDown" name="dropDown" ng-model="data.dropDown" > 
    ** content for dropDown menu, populating it by using Django 
    </select> 
    From Date: 
    <input type="text" id="dateFrom" ng-model="data.date1" /> 
    To Date: 
    <input type="text" id="dateTo" ng-model="data.date2" /> 

    <button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1 && !!data.date2)">Submit </button> 
</form> 

나는 또한 아래에이 방법을 시도 : 그래서 처음에 페이지가로드 및 모든 필드는 기본적으로 비어있는 경우

<form name="myForm"> 
    Select an option: 
    <select id="dropDown" name="dropDown" ng-model="data.dropDown" > 
    ** content for dropDown menu, populating it by using Django 
    </select> 
    From Date: 
    <input type="text" id="dateFrom" ng-model="data.date1" required/> 
    To Date: 
    <input type="text" id="dateTo" ng-model="data.date2" required /> 
    <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button> 
</form> 

을의 Submit 버튼이 비활성화되고 문제는 세 가지 필드 후 채워지면 활성화되지 않습니다. 감사합니다

Answer 1

두 번째 방법은 나를 위해 작동 .. 깨끗한 여기 작은 예제를 확인하시기 바랍니다

텍스트 상자에 삽입 된 각 변수를 확인합니다 때문에 ng-disabled="myForm.myName.$pristine"를 사용 해달라고 (사용 myForm을. $ 무효) 드롭 다운 요소에 required을 추가하면됩니다. here으로 재생할 수있는 플 런크를 만들었습니다.

<form name="myForm"> 
    Select an option: 
    <select id="dropDown" name="dropDown" ng-model="data.dropDown" required> 
    <option>red</option> 
    <option>blue</option> 
    <option>green</option> 
    </select><br/> 
    From Date: 
    <input type="text" id="dateFrom" ng-model="data.date1" required/><br/> 
    To Date: 
    <input type="text" id="dateTo" ng-model="data.date2" required /><br/> 
    <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button> 
</form> 

참고 :이 작업중인 각도의 버전을 지정하지 않은 것처럼 나는 plunkr에 각도 1.4을 사용했다.

편집 : OP 문제는 JQuery의 datepicker를 사용하여 작성되었음을 명시했습니다. angular-ui boostrap datepicker를 사용하여 제안 할 수 있습니까? Plunker example - Angular-UI Bootstrap docs

Answer 2

왜 ng pristine example