时间戳

首页 > 解决方案 > 第二个 ngb-tab 中的模板驱动表单验证

angular - 第二个 ngb-tab 中的模板驱动表单验证

问题描述

我在ngb-tab.

我想订阅我的表单的有效性更改，该表单位于 ngb-tab 中，如下所示：

 <ngb-tab title="someTitle" id="tab-other">
    <ng-template ngbTabContent>
      <form class="animated fadeIn" #tranferInitForm="ngForm">
...
        <div class="input-group">
              <input name="benName" type="text" class="form-control" id="benName" #benName='ngModel'
                [(ngModel)]="options.benName" required [pattern]="inputPattern" maxlength="70">
              <label>some label</label>
            </div>
...
            <button class="btn btn-primary"
              [disabled]="!tranferInitForm.valid"
              (click)="onClick()">next step</button>
          </div>
        </div>
      </form>

并检查按钮内输入的有效性[disabled]="!tranferInitForm.valid"

这应该足够了吗？

之后我尝试添加我的组件：

@ViewChild('tranferInitForm', { static: true }) tranferInitForm;
ngOnInit() {
    this.tranferInitForm.statusChanges.subscribe(validity => {
      switch (validity) {
        case 'VALID':
          if (this._formValid) { return; }
          this._formValid = true;
          break;
        case 'INVALID':
          if (!this._formValid) { return; }
          this._formValid = false;
          break;
      }
    });
}

在第一次运行时会引发错误

错误类型错误：无法读取未定义的属性“statusChanges”

但在那之后工作。我想是因为表单在选项卡内。

有任何想法吗？

感谢您的时间

标签： angularangular8

解决方案

问题是因为加载组件时未显示选项卡内容，这会导致未定义的模板引用。您需要将静态标志设置为 false 以对视图子元素进行动态查询，并等到表单选项卡变为活动状态才能访问它的引用。

有两种方法可以实现这一点：

1/ 简单的方法是使用响应式 from，这样您就可以在创建表单后实现所需的逻辑。

2/ 收听 tabChange 事件并检查 nextId 是否是您的表单选项卡 ID（在您的情况下为 tab-other），然后在延迟一段时间后访问表单引用，因为 tabChange 事件在选项卡更改发生之前发出：

html

<ngb-tabset (tabChange)="onTabChange($event)">

ts

...

订阅：订阅；

...

onTabChange(event) {
    if (event.nextId === "tab-other" && !this.subscription) {
      setTimeout(() => {
        this.subscription = this.tranferInitForm.statusChanges.subscribe(
          validity => {
            switch (validity) {
              case "VALID":
                if (this._formValid) {
                  return;
                }
                this._formValid = true;
                break;
              case "INVALID":
                if (!this._formValid) {
                  return;
                }
                this._formValid = false;
                break;
            }
          }
        );
      }, 100);
    }
  }

推荐阅读