kogosoftwarellc / angular-async-form Goto Github PK

• Scenario 1 - Checkboxes
  • User submits a form with checkboxes.
  • cb is called with an error for the checkboxed input.
  • User unchecks or checks accordingly.
  • User can then submit the form again.
• Scenario 2 - Radio Buttons
  • User submits a form with radio buttons.
  • cb is called with an error for the radio input.
  • User selects a radio button.
  • User can then submit the form again.

Problem

If an input is hidden and used to collect a computed value from another input(s), an async form error associated with the hidden input does not clear automatically when its value is updated (blur must be triggered manually).

In my opinion, inputs validated by async form should only show the error based on $valid/$invalid state of the model, thus not requiring blur/change events.

Scenario

function link(scope, el) {
  scope.$watch('input1', function(value) {
    $timeout(function() {
      scope.$apply(function() {
        input2.$setViewValue(value)
        // if async error exists, error will not be hidden
        // despite this model being $valid
      })
    }, 0, false)
  })

Workaround

function link(scope, el) {
  var input2el

  $timeout(function() {
    input2el = angular.element(el.find('input2'))
  })

  scope.$watch('input1', function(value) {
    $timeout(function() {
      scope.$apply(function() {
        input2.$setViewValue(value)
        input2el.triggerHandler('blur')
        // async error will now get cleared
      })
    }, 0, false)
  })