Question

我在Modal弹出表单验证中面临一个非常奇怪的问题。详情如下。

1）项目具有一个基础页面，其中角度模板的定义如下。它也有AG Grid

2）加载到模式弹出窗口中的模板为emailFailureActivityClosureTemplate。它是角分量。

3）使用

打开模式弹出窗口

@ViewChild('emailFailureActivityClosureTemplate') elementEmailFailureClosureView: ElementRef;

this.modalRef = this.modalService.show（this.elementEmailFailureClosureView，config）;

4）emailFailureActivityClosureTemplate是一个简单的表单组，其组件下面的HTML

电子邮件失败活动关闭 ×

  <div>

    <form [formGroup]="failureActivityClosureForm" (ngSubmit)="closeFailureActivity()" class="mycustomfrm" novalidate>

        <div class="container" style=" margin-top: 3%">

              <div class="form-row">
                      <div class="form-group col-md-12" 

                      [ngClass]="{'has-error':(failureActivityClosureForm.get('closureComments').touched || 
                      failureActivityClosureForm.get('closureComments').dirty) && 
                      failureActivityClosureForm.get('closureComments').valid}"

                      >
                        <label for="activityClosureComments" class="required-field">Closure Comments</label>


                       <textarea type="text" [ngClass]="{'is-invalid': !failureActivityClosureForm.valid}" 
                          formControlName="closureComments" 
                          class="form-control form-control-md"                            
                          placeholder="Please enter closure comments."  [(ngModel)]="failureComments" >

                        </textarea>




                      <span *ngIf="(failureActivityClosureForm.get('closureComments').touched || 
                      failureActivityClosureForm.get('closureComments').dirty) &&
                      failureActivityClosureForm.get('closureComments').errors">
                      <span *ngIf="failureActivityClosureForm.get('closureComments').errors.required" class="hasError">
                      Required
                      </span>
                      </span>

                      </div>
              </div>

              <div class="form-row">
                      <div class="col-md-12" style="padding-right: 1%; padding-bottom: 2%">
                          <button class="btn btn-sm  pull-right cstm_cncl" type="button" (click)="onCancelClick()" style="margin-right: 11px;min-width: 85px;">
                              Cancel
                          </button>

                          <button class="btn btn-sm   btn-primary pull-right" type="submit" style="margin-right: 11px;min-width: 85px;"
                              [disabled]="!failureActivityClosureForm.valid">
                              Save Comments</button>
                      </div>
              </div>

        </div>       


    </form>

  </div>

5）表单验证器作为

插入构造函数中

constructor（私有toastr：ToastrService，私人modalService：BsModalService，私人微调器：NgxSpinnerService，私有_notificationService：NotificationHistoryService，私有FB：FormBuilder） {

  this.failureActivityClosureForm = this.fb.group({

    closureComments: ['', [Validators.required, Validators.minLength(3)]],

  });

};

当没有任何滚动显示基本页面AG Grid时，弹出窗口中的表单验证可以正常工作。但是，当调整基本页面中“ AG网格”列的大小时，弹出窗口中的验证将停止工作。这是非常奇怪的行为，我无法解决问题。

任何帮助将不胜感激。

谢谢锡德什什

Angular Form Group验证不适用于Modal Pop Up

0 个答案: