CODEWITHSUNDEEP
angularjs
Tess
Tess

Reputation: 53

Add required to element if radio button is checked

I have a form with radiobuttons and an input field. If any of the three top radio buttons are checked I need to add "required" to the input field. My code:

<ng-form name="addShareholderForm">
<form name="form.addForm" class="form-validation" ng-submit=" $ctrl.addShareholder()" ng-init="$ctrl.setFormScope(this)">
 <md-radio-group ng-model="data.group1" ng-required="true">
    <md-radio-button value="passport" class="md-primary">Passport number</md-radio-button>
    <md-radio-button value="ssn">Social security number(SSN) </md-radio-button>
    <md-radio-button value="drivers-license">Drivers license number</md-radio-button>
     <md-radio-button value="person-other">Other</md-radio-button>
 </md-radio-group>
  <input placeholder="Type number" ng-required="data.group1 == 'passport' || data.group1 == 'ssn' || data.group1 == 'drivers-license'">
<md-input-container>
   <md-button type="submit" ng-disabled="!addShareholderForm.$valid" class="md-raised md-primary md-no-ink submitshareholder" aria-label="Lägg till">
        <i class="material-icons done-button-fab">add_circle</i>Lägg till
    </md-button>
</md-input-container>

However this is not working and I don't know what I'm doing wrong? The input field is not set to required.

EDIT: I changed the code according to suggestions below and added the ng-form and the button to the code. The button is supposed to be disabled when the form is invalid but i´t is enabled as soon as I check a radio button without filling out the input.

Upvotes: 0

Views: 1146

Answers (3)

developer033
developer033

Reputation: 24874

You just commited two mistakes:

1st.: In type attribute of your input, it should be type="number", since type="string" isn't even valid.

2nd.: You forgot to add ng-model in your input tag.

Then, just change this:

<input type="string" min="1" max="40" placeholder="Type number" ng-required="data.group1 == 'passport' || data.group1 == 'ssn' || data.group1 == 'drivers-license'">

for:

<input ng-model"input" type="number" min="1" max="40" placeholder="Type number" ng-required="data.group1 == 'passport' || data.group1 == 'ssn' || data.group1 == 'drivers-license'">

Upvotes: 1

Tess
Tess

Reputation: 53

I finally solved the problem. I forgot to add $ctrl 

<input placeholder="Type number" ng-required="$ctrl.data.group1 == 'passport' || $ctrl.data.group1 == 'ssn' || $ctrl.data.group1 == 'drivers-license'"/>

Upvotes: 0

rob
rob

Reputation: 18513

Your radio buttons should not all have ng-models. Here is an example of how to use md-radio

https://material.angularjs.org/latest/demo/radioButton

<md-radio-group ng-model="data.group1" ng-required="true">
    <md-radio-button value="passport" class="md-primary" pidentifier-check>Passport number</md-radio-button>
    <md-radio-button value="ssn" pidentifier-check>Social security number(SSN)</md-radio-button>
    <md-radio-button value="drivers-license">Drivers license number</md-radio-button>
    <md-radio-button value="person-other">Other</md-radio-button>
</md-radio-group>

<input type="string" min="1" max="40" placeholder="Type number" ng-required="data.group1 == 'passport' || data.group1 == 'ssn' || data.group1 == 'drivers-license'"/>

Upvotes: 1

Related Questions