Question

我在ng2弹出窗口中有一个Angular表单：

<popup>
  Sign up for our Newsletter!     <form #f="ngForm" (ngSubmit)="onSubmit()" novalidate>
</button>         <input type="email"/>
      <button>Submit</button>
    </form>
</popup>
<button class="submit" (click)="ClickButton()">Sign up for our Newsletter </button>

这是onClick事件函数：

constructor(private popup:Popup) { }
  testAlert() {   ClickButton(){
    alert("Newsletter event works");    this.popup.options = {
  widthProsentage: 15,
  showButtons: false,
  header: "Sign up for our Newsletter!",
}
this.popup.show(this.popup.options);
  }

它工作正常，但是即使输入为空白，我也可以提交她，我该怎么做，以使其在单击为空时不会提交

我尝试使用RegEx，但是没有用

Answer 1

考虑添加验证。

类似这样的东西：

      <div class="form-group row">
        <label class="col-md-2 col-form-label"
               for="userNameId">User Name</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="userNameId"
                 type="text"
                 placeholder="User Name (required)"
                 required
                 (ngModel)="userName"
                 name="userName"
                 #userNameVar="ngModel"
                 [ngClass]="{'is-invalid': (userNameVar.touched || userNameVar.dirty) && !userNameVar.valid }" />
          <span class="invalid-feedback">
            <span *ngIf="userNameVar.errors?.required">
              User name is required.
            </span>
          </span>
        </div>
      </div>

然后，如果字段无效，则可以禁用提交按钮：

         <button class="btn btn-primary"
                  type="submit"
                  style="width:80px;margin-right:10px"
                  [disabled]="!loginForm.valid">
            Log In
          </button>

Answer 2

（ngSubmit）是Angular ngForm 内部的内置事件发射器，与 button 直接相关元素，它可以触发表单提交。因此，正如 lealceldeiro 所说，您只需要 onSubmit 功能和用于在表单标签内内部提交的按钮。

请提供实时演示，以便我们可以查看整个文件（尤其是.ts）。正确设置验证取决于您要使用哪种形式（模板或ReactiveForms）。

See more关于官方文档中正确使用ngForm的信息。

如果输入为空，则防止提交角形

2 个答案: