Angular ng-show how to make visible

Question

Working on a simple contact form where I need to show an error message if the $scope is undefined.

The validation part works however I can't remember how to enable the view of the message under ng-show in the html side.

HTML:

<p class="response error" ng-show="error">{{errorMessage}}</p>

JS:

var $emptyContent = 'Please enter your prices.';
app.controller('priceForm', ['$scope', '$http', function($scope, $http){
$scope.formData;
// Process the form data
$scope.submitForm = function () {
  console.log($scope.formData);
  if($scope.formData == null) {
    // Show empty content message

    console.log($emptyContent);
  }

}
}])

Why not just `ng-show="errorMessage"` which will show non-empty error messages? — ryanyuyu, Jan 03 '16 at 15:26

Pankaj Parkar · Accepted Answer · 2016-01-03T15:31:23.720

1

Just make an error flag to true inside your controller OR you could just have ng-show="errorMessage" as @ryanyuyu suggested in comment.

Code

$scope.submitForm = function () {
  console.log($scope.formData);
  if($scope.formData == null) {
    $scope.error = true; //or //$scope.errorMessage = $emptyContent;
  }
};

edited Jan 03 '16 at 15:31

answered Jan 03 '16 at 15:27

Pankaj Parkar

134,766
23
234
299

Is there a way I can parse a message to the $scope.error? – Warve Jan 03 '16 at 15:28
@JesseC I don't understood what exactly you wanted to do? could you elaborate more on it? – Pankaj Parkar Jan 03 '16 at 15:29
I got it, just amended the line to: $scope.errorMessage = $emptyContent; – Warve Jan 03 '16 at 15:30
@JesseC Glad to hear that.. Thanks :) – Pankaj Parkar Jan 03 '16 at 15:37

score 0 · Answer 2 · answered Jan 03 '16 at 15:31

You dont want to create custom error scope you use predefined object to solve this problem

<form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"
           ng-minlength="5"
           ng-maxlength="20"
           required />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
    <div ng-message="required">You did not enter a field</div>
    <div ng-message="minlength">Your field is too short</div>
    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>

https://docs.angularjs.org/api/ngMessages/directive/ngMessages

Angular ng-show how to make visible

2 Answers2