angularjs - Angular 混合应用程序表单验证

Question

我将 AngularJS 应用程序升级到 Angular5。

我将一些组件从 AngularJS 迁移到 Angular5，但不是应用程序的所有其他窗口使用 ng-form 进行表单验证。

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

我可以毫无问题地捕获“form.account.$modelValue”，但是如果我使用自定义验证来设置帐户状态，我永远不会在 form.account.$valid 或 form.$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 () {

        },

  });

}

Answer 1

好的，我终于找到了解决方法。在我的 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) 
        }
    },