Angular Hybrid Application Form Validation

Question

Im upgrading a AngularJS app to Angular5.

Im migrating some components from AngularJS to Angular5, but not all the other windows of the app that use ng-form to form validation.

<div class="form-group">
<ng-form name="accForm" novalidate>
  <account ng-model="$ctrl.cccValue" label="ACC:" name="ccc"></account>
</ng-form>
    <pre>
        VALUE {{ accForm.ccc.$modelValue }}<br>
        ACC VALID: {{accForm.ccc.$valid}} <br>
        ACC ERRORS: {{accForm.ccc.$error}} <br>
        FORM VALID: {{accForm.$valid}} <br>
        FORM ERRORS: {{accForm.$error}} <br>
        FORM {{ accForm | json }} <br>

    </pre>
</div>

I can catch the "form.account.$modelValue" without problems, but if I use custom validation to set the account status I never get the error on the form.account.$valid or the form.$valid.

Example:

import { LqpaccountComponent } from './../../../account/account/account.component';
import { downgradeComponent } from '@angular/upgrade/static';
import * as angular from 'angular';

export function AccountStub() {
  angular.module('architecture')
  // downgrade component
  .directive('AccountDowngraded',  downgradeComponent({ component: AccountComponent }) as angular.IDirectiveFactory)
  // create stub
  .component('Account', {
        bindings: {
            name: '@',
            required: '=?ngRequired',
            disabled: '=?ngDisabled',

        },
        template: `
                  <account-downgraded
                        [name]='$ctrl.name'
                        ng-model='$ctrl.cccValue'
                        [required]='$ctrl.required'
                        [disabled]='$ctrl.disabled'
                  >
                  </lqp-ccc-downgraded>
            `,
        controller: function () {

        },

  });

}

score 0 · Answer 1 · answered Mar 29 '19 at 13:26

Ok I finnally found a workaround. Inside of my AccountComponent I emit a "hasErrorChange"

Then i use Angular Element an element id to get the value

    template: `
              <account-downgraded
                    [name]='$ctrl.name'
                    name="{{$ctrl.name}}"
                    ng-form
                    ng-model='$ctrl.cccValue'
                    [required]='$ctrl.required'
                    [disabled]='$ctrl.disabled'
                    [id]="$ctrl.id"
                    (has-error-change)="$ctrl.hasErrorChange(value)"
              >
              </lqp-ccc-downgraded>
        `,
    controller: function () {
      var _this = this;
     _this.hasErrorChange = function (value) {
        angular.element(document.getElementById(_this.id)).scope()[_this.name].$setValidity('myError', !value) 
        }
    },

Angular Hybrid Application Form Validation

1 Answers1