javascript - md-checkbox validation - Only works initially on the element loses focus, however it works completely fine after

Question

I've inherited an old AngularJS project (1.6.x). I'm not too savvy with AngularJS so I've been trying to feel my way through it.

I've added two checkboxes to the end of a form that need to be checked in order to submit. If they're not checked then a validation message appears. This works fine if I click Submit and the validation function is run.

The validation should also reactively work if I were to check and then uncheck the checkbox without clicking submit (the validation message should appear). However, it doesn't seem to initially work on the first click, but works correctly once the checkbox has lost and regained focus.

The form is generated via a schema that builds the form out using a number of built components.

form template

<div layout-align="center center" layout="row" class="form-block" ng-class="{'is-ie': $ctrl.$rflUtil.isIE()}">
    <form sf-schema="$ctrl.data.schema" sf-form="$ctrl.data.form" sf-model="$ctrl.data.model"
     ng-submit="$ctrl.onSubmitForm($event)" name="$ctrl.schemaForm" novalidate></form>
</div>

form controller

constructor($element, $scope, $rflUtil, $timeout) {
    'ngInject';
    this.$element = $element;
    this.$element.addClass(styles['rfl-form']);
    this.$scope = $scope;
    this.schemaForm;
    this.$rflUtil = $rflUtil;
    this.$timeout = $timeout;

    var that = this
    this.$scope.$watch('data', function(event) {
        that.$timeout(() => {
            let list = that.$element[0].getElementsByTagName('form')[0].querySelectorAll('md-input-container')
            for (var i = 0; i < list.length; i++) {
                if (angular.element(list[i]).scope() && angular.element(list[i]).scope().ngModel && angular.element(list[i]).scope().ngModel.$viewValue) {
                    list[i].classList.add('md-input-has-value');
                }
            }
        });
    }, true)

    this.$scope.$emit('modelUpdate');
}

Relevant schema code snippets

 terms: {title: 'I agree to the <a target=' _blank' href=''+$ctrl.data.Links.TermsConditions+''>Terms and Conditions</a>', type: 'boolean'},

privacyCollectionTerms: {title: 'I agree to the <a target='_blank' href=''+$ctrl.data.Links.PrivacyCollectionStatement+''>Privacy Collection Statement</a>', type: 'boolean'},

{
    type: 'checkbox',
    key: 'terms',
    validationMessage: 'You must agree to the Terms and Conditions',
    required: 'true',
    bordered: true,
}, {
    type: 'checkbox',
    key: 'privacyCollectionTerms',
    validationMessage: 'You must agree to the Privacy Collection terms',
    required: 'true',
    bordered: true,
},

Checkbox template

<md-input-container class="schema-form-{{::form.type}} {{::form.htmlClass}}"
   ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
   sf-messages sf-layout sf-material-class="md-input-has-value">
<div ng-class="{'bordered' : form.bordered}" layout="column" >
   <div layout="row" layout-align="start center">
      <md-checkbox sf-field-model sf-changed="form" ng-disabled="form.readonly" schema-validate="form"
         sf-material-class="md-checked" class="{{::form.fieldHtmlClass}} md-primary"
         name="{{::form.key|sfCamelKey}}" aria-label="{{::form.title}}" ng-required="form.required"
         rfl-form-checkbox
         layout="row"
         layout-align="center center" flex>
         <span ng-bind-html="form.title"></span>
      </md-checkbox>
      <md-button class="md-icon-button rfl-tooltip" ng-if="form.help">
         <md-tooltip md-direction="right" class="tooltip">{{form.help}}</md-tooltip>
         <md-icon md-svg-icon="question-mark"></md-icon>
      </md-button>
   </div>
   <div ng-if="ngModel.$error && ngModel.$invalid" sf-message="form.description" class="error- 
      message"></div>
</div>

I've tried a number of ways of trying to call the validation function to trigger a validation on click using ng-change and ng-click. I've also tried setting a default value with ng-init, I believed there was perhaps no initial value set on the checkbox and that was maybe causing the form to not rerender.

I tried calling the validation function in the parent form controller but that also doesn't seem to work, and I've gone as far as setting up a checkbox directive which is injected into the template to listen for events from the elements.

I'm at a bit of a loss now as to why it won't work.

Could anyone point me in the right direction? Thanks

Answer 1

等待大神答复