-1

I'm Using AngularJS, I have a need that to know whether control within the form is required or not. So that i can append the label above the control with * symbol.

I have seen solutions like below: Angularjs required asteriks

But in my case i need it for label above to it and also Not all controls are basic controls i have used plugin's like ui-select and many more.

Result:

As we have in-built isEmpty() or $dirty functions in angularjs 

formName.TextBoxControlName.$dirty => true/false;

can i have function/property included in angularjs saying that isRequired (returns boolean)

formName.TextBoxControlName.$isRequired => true/false;

im expecting is it possible to have a new property to control itself like (isRequired) so that no matter what the scenario is, i can use that property for that control to set the asterisk symbol.

in HTML:

(label) {{formName.TextBoxControlName.isRequired}}

in JS:

$scope.star function (){
    return $scope.formName.TextBoxControlName.isrequired ? '*' : ''
    }

[Edit]

I'm Updating with Scenarios in below:

Direct Scenario

is, I have many textboxes in form with 

required="textboxName" (if NOT required).
required="!textboxName" (if required).

Indirect Scenario 1:

label{*}        (label)
[________]      (textbox)

the input text is by default not mandatory (so NO asterisk symbol).

required="textboxName"

but on some condition i making it required (so Need asterisk symbol) as below:

$scope.formName.TextBoxControlName.$setValidity('required', false);

Indirect Scenario 2:

label{*}             (label)
[________] [x]       (textbox)(checkbox)

the input text is by default not mandatory (so NO asterisk symbol) But on checkbox true it is mandatory (so Need asterisk symbol).

required="checkboxName"

Now how can i maintain asterisk symbol for my scenario's in HTML page itself (if possible).

Community
  • 1
  • 1
Pavan Kosanam
  • 79
  • 3
  • 13

2 Answers2

0

var myApp = angular.module('myApp', []);

function ExampleController($scope) {
  $scope.isRequired = true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="ExampleController">
    <form name="form">
      <label for="required">Toggle required:</label>
      <input type="checkbox" ng-model="isRequired" id="required" />
      <br>
      <label for="input">Label</label><span ng-show="isRequired">*</span>
      <input type="text" ng-model="model" id="input" name="input" ng-required="isRequired" />
      <br>
    </form>
  </div>
</body>

You could simply use ngRequired...
See code snippet (based on official docs).

MarcoS
  • 17,323
  • 24
  • 96
  • 174
0

For validate your form You can use myForm.$valid and myForm.input.$error.required. you can find in documentation https://docs.angularjs.org/api/ng/directive/form

For show * when form is invalid: 

input: <input name="input" ng-model="test.test" required>
  <span class="error" ng-show="myForm.input.$error.required">*</span><br>

And for prevent submit you can Use ng-submit

<form name ="myForm" novalidate ng-submit="myForm.$valid && myForm.submit()">

P.S. novalidate is for prevent a native validation.

LorenzoBerti
  • 6,704
  • 8
  • 47
  • 89
  • Hi LorenzoBerti, by showing controls to user itself i need * to be displayed, BUT myForm.input.$error.required will be there only if form is submitted and form is not valid – Pavan Kosanam Aug 30 '16 at 13:55
  • Yes, you can wrap on ng show. I will edit my answer – LorenzoBerti Aug 30 '16 at 13:58
  • On pageload how can i show page as dirty to user? i need them on page load and then act according to required/optional conditions – Pavan Kosanam Aug 30 '16 at 14:02
  • Sorry, maybe I don't understand, you want know if form is dirty or pristine or you want send submit form and return with error? – LorenzoBerti Aug 30 '16 at 14:03