Make input type file required based on condition in AngularJS

Question

I am receiving a JSON data from backend like these

{
  "data":{
    "xyz":[
      {
        "number":"1",
        "short_text":"Vertrag unterzeichnen",
        "long_text":"Nach Vertrabsunterzeichnung Namen eintragen",
        "is_photo":false
      },
      {
        "number":"2",
        "short_text":"HR unterrichten",
        "long_text":"HR hat eigene Workflows",
        "is_photo":true
      }
    ]
  }
}

And in the html i am populating a form by ng-repeat

<tr data-ng-repeat="choice in choices track  by $index">
    <td>{{choice.number}}</td>
    <td><p>{{choice.short_text}}</p></td>
    <td><input type="textbox" size="50" class="des-textinput" ng-model="choice.desc" required></td>
    <td><input type="checkbox"  ng-model="choice.include"></td>
    <td><input type="file" id="abc{{$index}}" class="photo-upload"
               file-model="pic{{$index}}" accept="image/*">
    </td>
</tr>

Now I want to make the input type file required if the value of is_photo is true in the JSON I am receiving. For each row if the value if is_photo is false then it will be not required.

From the given JSON the condition will be the first input type file will be not required as first row is_photo is false, but the second one will be required as the value of is_photo is true.

How will I do that?

If you want your `file-model` directive to integrate with the [ng-model controller](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) and the [ng-form controller](https://docs.angularjs.org/api/ng/type/form.FormController), you need to post your code for that directive. — georgeawg, Nov 15 '17 at 18:59

Hey24sheep · Accepted Answer · 2017-11-15T10:34:02.367

2

You can use "ng-required"

For documentation you could read this: https://docs.angularjs.org/api/ng/directive/ngRequired

Like this

<input name="myInput" ng-model="myInput" ng-required="myVar == 2">

//If photo is true required will be true else false
<input name="myInput" ng-model="myInput" ng-required="_photo">

<input name="myInput" ng-model="myInput" ng-required="choice.is_photo">

//Or use some function which returns boolean
<input name="myInput" ng-model="myInput" ng-required="isRequired(choice)">

//This is how you would use it with form and stop form from submittion    
<form ng-app="myApp" ng-controller="validateCtrl"
      ng-init="isRequired=true"
      name="myForm" novalidate ng-submit="myForm.$valid && submit()">
        Username: <input type="text" name="user" ng-model="user" 
                         ng-required="isRequired">
        Email : <input type="email" name="email" ng-model="email" required>
        <input type="submit" ng-click="isRequired=!isRequired;" />
</form>

    <script>
       var app = angular.module('myApp', []);
       app.controller('validateCtrl', function($scope) {
           $scope.user = 'John Doe';
           $scope.email = 'john.doe@gmail.com';
           $scope.submit = () => {console.log("s");}
       });
    </script>

edited Nov 15 '17 at 10:34

answered Nov 15 '17 at 10:01

Hey24sheep

1,172
6
16

It is working but it is not preventing the form from submitting – Rahul Nov 15 '17 at 10:11
because your form is not checking for invalid... Do this
– Hey24sheep Nov 15 '17 at 10:14
it is already there ..but not working – Rahul Nov 15 '17 at 10:19
It should work. ng-submit="yourform.$valid && submitFunc()" this should work. your submit button will be like this : inside the form. – Hey24sheep Nov 15 '17 at 10:23
@Samim I have updated my answer and inclued form just try that. It will work. – Hey24sheep Nov 15 '17 at 10:34
Save i am using the input type submit like these ..it remains disabled for all other required field but not working for the input type file – Rahul Nov 15 '17 at 10:39
See this is the issue. You are explicitly calling ng-click=save(); if your button is in your form. then put save() in ng-submit example
..urbutton
– Hey24sheep Nov 15 '17 at 10:42
thanks ...working perfectly :) – Rahul Nov 15 '17 at 10:45
You are welcome, I am glad it worked :) – Hey24sheep Nov 15 '17 at 10:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159049/discussion-between-samim-and-hey24sheep). – Rahul Nov 15 '17 at 10:46

score 0 · Answer 2 · answered Nov 15 '17 at 10:06

0

you use this use

it will set automatically if _photo is true it make as required

<input name="myInput" ng-model="myInput" ng-required="_photo">

answered Nov 15 '17 at 10:06

Vinoth

972
1
16
47

score 0 · Answer 3 · edited Nov 15 '17 at 17:34

0

You can use ng-required property. ref ng-required

<input type="file" id="abc{{$index}}" class="photo-upload"
       file-model="pic{{$index}}" accept="image/*"
       ng-required="choice.is_photo == true" />

edited Nov 15 '17 at 17:34

georgeawg

48,608
13
72
95

answered Nov 15 '17 at 10:18

Sathiyaraj

343
3
11

Make input type file required based on condition in AngularJS

3 Answers3