Angular混合申请表验证

时间:2019-03-14 15:45:17

标签: angularjs angular angular-forms angular-upgrade angular2-form-validation

我将AngularJS应用升级到Angular5。

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

from order in docs.Orders
select new
{
    order.Company,
    Total = order.Lines.Sum(l => (l.Quantity / 0))
}

我可以毫无问题地捕获“ form.account。$ modelValue”,但是如果我使用自定义验证来设置帐户状态,则永远不会在form.account。$ valid或form。$ valid。上收到错误。 / p>

示例:

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

1 个答案:

答案 0 :(得分:0)

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