Угловая гибридная проверка формы заявки - PullRequest
Новая
       34

Угловая гибридная проверка формы заявки

0 голосов
/ 14 марта 2019

Я обновляю приложение AngularJS до Angular5.

Я мигрирую некоторые компоненты из AngularJS в Angular5, но не все другие окна приложения, которые используют ng-форму для проверки формы. 

<code><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>

Я могу поймать "form.account. $ ModelValue" без проблем, но если я использую пользовательскую проверку для установки статуса учетной записи, я никогда не получаю ошибку в form.account. $Действительный или форма. $ valid.

Пример: 

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 () {

        },

  });

}

1 Ответ

0 голосов
/ 29 марта 2019

Хорошо, я наконец нашел обходной путь.Внутри моего AccountComponent я испускаю "hasErrorChange"

Затем я использую Angular Element id элемента, чтобы получить значение 

    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) 
        }
    },
...