Угловая форма проверки: как переопределить $ недействителен

Question

<div class="col-xs-7"> 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox" ng-model="settings.input"> 
     checked 
     </label> 
    </div> 
    <div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''"> 
     <input type="number" class="form-control input-sm" id="inputEmail3" name="input" ng-model="settings.input" placeholder="if checked, then do validation" required min="0"> 
     <span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> 
    </div> 
    </div> 

demo here

Мой вопрос, когда я установил required для input, то form.$valid будет ложным, Но я хочу только когда checkboxпроверено, затем сделать input валидация, поэтому, когда не проверяется, даже input пуст, значение form.$valid должен быть истинным

Что я цель состоит в том, чтобы переопределить $valid из input, как переопределить?

Answer 1

Угловое имеет ng-required директиву, что позволяет включить требуемый атрибут с выражением. Заменить required="" на input со следующим:

ng-required="settings.checked" 

Live example

Answer 2

Поле формы становится недействительным, поскольку для поля ввода требуется атрибут, поэтому каждый раз, когда это поле ввода формы считается необходимым. Итак, что вы можете сделать, вы должны добавить атрибут required в поле формы условно, указав ng-required директиву на входе с expression.

Разметка

<div collapse="!settings.input" ng-class="myform.input.$invalid ? 'has-error has-feedback': ''"> 
    <input type="number" class="form-control input-sm" id="inputEmail3" name="input" 
    ng-model="settings.input" placeholder="if checked, then do validation" 
    ng-required="settings.input" min="0"/> 
    <span ng-show="myform.input.$invalid" class="glyphicon glyphicon-remove form-control-feedback" 
    aria-hidden="true"></span> 
</div> 

Forked Plunkr