Warnings in AngularJs

Question

Angularjs has great infrastructure for form validation and showing error messages. But, I am in a situation that I have to show a warning message to a user in a specific scenario. Here is the diagram of my simple form

The form has required and pattern validation applied on both fields. In addition to this validation I want a warning message to be displayed to the user if VatAmount is not 20 percent of the InvoiceAmount. The warning will differ from validation in following aspects

1. It will not prevent the form submission
2. It will only appear if both fields (InvoiceAmount and VATAmount) are valid
3. The warning should have a button or link that would read "Change and proceed". When user presses that button the warning message will hide and focus will be set to VATAmount field.

I believe this is a prefect use case for creating a directive. Actually, I have given it a try and put my effort in the form of a plunker. But my directive does not handle following cases

1. It appears even if the fields involved in warning are invalid
2. The show and hide functionality is not implemented (have no idea how to target it)

Here is the link to the plunker

Answer 1

Your plunkr demo was on the right track; really you just needed to check for the special cases of when one of the values was empty.

I'd suggest calculating the fraction and storing it in the scope, and then watching that to see whether you should display your tax rate warning. Here's how to calculate the fraction. If either invoice.Amount or invoice.VAT is empty, the fraction will be set to null.

if (amt == null || vat == null) {
    $scope.warning.fraction = null;
    return;
}
$scope.warning.fraction = vat / amt;

This works because those properties will be set to undefined if the user doesn't enter a valid number due to your use of ng-pattern.

However, while it's nice to encapsulate this in a directive, you don't need to compile the template yourself. Just use the built-in ng-transclude directive. Then you can include a button that references the current scope like this:

     <vat-warning>
       Vat Amount is not 20%.
       <button ng-click="invoice.VAT = invoice.Amount / 5">change</button>
     </vat-warning>

Your directive would contain this declaration:

    transclude: true,
    template: '<span class="alert-warning" ng-show="warning.show" ng-transclude></span>'

Plus a controller to update the directive's local scope to manipulate the warning object. Here's an updated demo.

Answer 2

You need to calculate visibility of vat-warning tag in controller on basis of $error.required and $error.pattern of invoiceAmount and vatAmount and then use it as below:

$scope.isInvoiceAmountInvalid = function () {
  var error = $scope.invoiceForm.invoiceAmount.$error;
  var required = error.hasOwnProperty("required") && error.required;
  var pattern = error.hasOwnProperty("pattern") && error.pattern;
  console.log("Inside isInvoiceAmountInvalid", error, required, pattern);
  return (required || pattern);
};

$scope.isVatAmountInvalid = function () {
  var error = $scope.invoiceForm.vatAmount.$error;
  var required = error.hasOwnProperty("required") && error.required;
  var pattern = error.hasOwnProperty("pattern") && error.pattern;
  console.log("Inside isVatAmountInvalid", error, required, pattern);
  return (required || pattern);
};

Here is an updated plunker for the same