AngularJS: отключить кнопку, когда поля ввода пустые

Question

У меня есть выпадающее меню, два текстовых поля ввода и кнопка отправки. Я хочу, чтобы кнопка отправки была отключена до тех пор, пока не будет выбран элемент раскрывающегося списка И оба поля ввода заполнены. Я просмотрел несколько примеров, включая 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

Ваш второй метод работает для меня (с использованием Myform. $ Недействителен) если я добавлю required в раскрывающийся элемент. Я создал plunkr, с которым вы можете играть с 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> 

Примечание: Я использовал Угловая 1.4 в plunkr, как вы не указали, какую версию угловому вы работаете.

Редактировать: OP заявила, что проблема была создана с использованием датпикера JQuery. Могу ли я предложить использовать угловую утилизацию датпикера? Plunker example - Angular-UI Bootstrap docs

Answer 2

Почему бы вам не использовать ng-disabled="myForm.myName.$pristine", потому что нетронутые будет проверять для каждой переменной, вставленной в текстовых

пожалуйста, проверьте небольшой пример здесь .. ng pristine example