Отображать два поля как обязательные для выбранного переключателя - PullRequest
Новая
       5

Отображать два поля как обязательные для выбранного переключателя

2 голосов
/ 19 июня 2019

У меня есть этот переключатель в HTML. 

<div class="radio">
  <label>
  <input id="vendor" type="radio" ng-model="c.data.cvendor" name="customerType" value="cvendor" ng-true-value="CVendor" ng-false-value="false">
  ${CVendor}
  </label> 
</div>

После того, как эта опция отмечена, два поля ниже должны отображаться и являются обязательными.Как я могу добиться этого в HTML? 

<div class="form-group is-required">
  <label for="fieldb">${FieldB}:</label>
  <input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B">
</div>
<div class="form-group is-required">
  <label for="fieldc">${FieldC}:</label>
  <input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C">
</div>

Ответы [ 3 ]

0 голосов
/ 19 июня 2019

Вы можете достичь этого, используя ng-required . На основании значения c.data.fieldb оно станет обязательным или необязательным. Аналогично, для скрытия и показа вы можете использовать ng-show / ng-hide . 

<div class="form-group is-required">
     <label for="fieldb">${FieldB}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="c.data.cvendor == 'CVendor'">
</div>

<div class="form-group is-required">
     <label for="fieldc">${FieldC}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="c.data.cvendor == 'CVendor'">
</div>
0 голосов
/ 19 июня 2019

Попробуйте этот код 

var checkBox;
function DemoFunctin() {
 checkBox = document.querySelector('input[type="checkbox"]');
var textInput1 = document.querySelector('input[name="first"]');
var textInput2 = document.querySelector('input[name="second"]');


    if (textInput1.hasAttribute('required') !== true && textInput2.hasAttribute('required') !== true) {
       
        textInput1.setAttribute('required','required');
        textInput2.setAttribute('required','required');
         
    }

    else {
        textInput1.removeAttribute('required'); 
        textInput2.removeAttribute('required'); 
        
    }
	
}
if(checkBox){
checkBox.addEventListener('change',toggleRequired,false);

}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<body>

<h3>display-two-fields-as-mandatory-based-on-selected-radio-button</h3>


<form>
<p><input type="radio" onclick="DemoFunctin();"/>Check Me to make the Text Box a Required Field</p>
<input type="text" name="first"/>
<input type="text" name="second"/>
<input type="submit" value="Submit" />
</form>

</body>
</html>
0 голосов
/ 19 июня 2019

Попробуйте это ng-if="c.data.cvendor==='cvendor'".

Радиокнопка устанавливает c.data.cvendor в 'cvendor'. Таким образом, вы можете управлять отображением двух полей ввода с помощью ng-if

Что касается обязательных полей, вы можете попробовать ng-required="true". 

    <div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
     <label for="fieldb">${FieldB}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldb" id="fieldb" placeholder="Enter Field B" ng-required="true">
    </div>

    <div class="form-group is-required" ng-if="c.data.cvendor==='cvendor'">
     <label for="fieldc">${FieldC}:</label>
     <input type="text" class="my-input" ng-model="c.data.fieldc" id="fieldc" placeholder="Enter Field C" ng-required="true">
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...