提交按钮在一个由输入需求控制的表单之外。

I have a simple form with one input field

我有一个简单的表单，有一个输入字段。

    <form ng-submit="UsernameModalInstance.submitUsername()">
        <input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">        
    </form>

Note: this input field does not allow for no entry or any white spaces Thus: my ng-submit function only fires when these requirements have been met

注意:这个输入字段不允许任何条目或任何空格:我的ng提交函数只有在满足这些要求时才触发。

this is the functionality i want

这就是我想要的功能。

However, there is another way to submit the form!

然而，还有另一种方式提交表单!

underneath this form i have a button:

在这个表单下面有一个按钮:

<button class="btn btn-primary" title="You must enter a username to proceed" ng-click="UsernameModalInstance.submitUsername()" type="button">Submit Username</button>

The ng-click fires the same function as the ng-submit on the input

ng-click触发与输入的ng-submit相同的功能。

BUT I want this submit username button to have the same requirements as the form input.

但我希望这个提交用户名按钮与表单输入具有相同的需求。

currently, clicking the button will fire the function without meeting any of the requirements of having to enter something and no white spaces!

当前，点击按钮将会触发功能，而不需要满足任何需要输入或空格的要求!

Is there a way to do this?

有没有办法做到这一点?

1 个解决方案

#1

Here is a simple example. You can use it with ng-submit i.e replace onsubmit with ng-submit and no need of ng-click if you keep the submit button inside form element

这里有一个简单的例子。你可以用它和ng-submit i。如果你保持提交按钮在表单元素内，用ng提交替换onsubmit，不需要ng-click。

function submitUsername(){
  console.log("valid username");
  event.preventDefault();//just to so it works here might not need in your code
}

<form onsubmit="submitUsername()">
        <input type="text" required autofocus size="25" pattern="[^\s]+" title="no spaces allowed" placeholder="Enter Username Here...">    
        <button type="submit">Submit</button>
    </form>