Question

我知道我可以添加以下内容以禁用“登录”按钮，直到表单有效：

<button type="submit"[disabled]="!loginForm.form.valid">Submit</button>

但是，我更喜欢用户能够单击登录按钮，然后查看所需的消息显示。我会在组件的login（）函数中处理这个吗？

<form #loginForm="ngForm">
        <input mdInput type="text" placeholder="Enter Email Address" id="email" 
            [(ngModel)]="email" name="email" required #em="ngModel">
        <div [hidden]="em.valid || em.pristine">
          Email is required
        </div>
        <input mdInput type="text" placeholder="Enter Password" id="password" 
            [(ngModel)]="password" name="password" required #pwd="ngModel">
        <div [hidden]="pwd.valid || pwd.pristine">
          Email is required
        </div>
    <a md-raised-button (click)="login()" color="primary">Login</a>
</form>

Answer 1

是 - 只需创建一个变量来跟踪是否已单击Login，并将其添加到验证消息的[hidden]条件中。

因此，如果变量被称为<form #loginForm="ngForm"> <input mdInput type="text" placeholder="Enter Email Address" id="email" [(ngModel)]="email" name="email" required #em="ngModel"> <div [hidden]="em.valid || (em.pristine && !loginClicked)"> Email is required </div> <input mdInput type="text" placeholder="Enter Password" id="password" [(ngModel)]="password" name="password" required #pwd="ngModel"> <div [hidden]="pwd.valid || (em.pristine && !loginClicked)"> Email is required </div> <a md-raised-button (click)="login()" color="primary">Login</a> </form>，那么您的标记将类似于：

@ViewChild('loginForm') loginForm: NgForm;

这意味着您需要确保表单值在Login（）方法中有效。这可以通过在组件代码中引用表单来完成：

    <?php
include 'dbconnection.php';
error_reporting(E_ALL); ini_set('display_errors', 1);
if (mysqli_connect_errno()) { echo "Error: no connexion allowed : " . mysqli_connect_error($mysqli); }

if(isset($_POST["headline"], $_POST["description"])) {
    $head = trim($_POST["headline"]);
    $desc = trim($_POST["description"]);
}
$query = ("SELECT headline, description FROM articles WHERE headline=? AND description=?");

$stmt = $mysqli->prepare($query);

$stmt->bind_param("ss", $head, $describe);

$stmt->execute();

$stmt->bind_result($head, $describe);

$stmt->store_result();

if ($stmt->num_rows > 0) {
    while($stmt->fetch()){
        echo"[ $head -> $describe ]<br />";
      }
}

else
{ echo"[ 0 results ]"; }

$stmt->close();
?>

或者，（除了最简单的情况以外），您可以使用模型驱动/反应表单，这样可以实现更简单的代码内交互。 angular.io文档页面上有很多很好的例子： https://angular.io/docs/ts/latest/guide/reactive-forms.html

在Angular中提交表单时向用户显示验证消息

1 个答案: