Question

我在Angular中创建了模板驱动的表单。

<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" class="form-control" name="fullName" #fullName="ngModel" required>
<div *ngIf="fullName.errors?.required && fullName.touched" class="validation-message">Required</div>
<button type="submit">Post</button>

无效触摸时显示错误。我需要在提交表单时显示错误，即单击提交按钮时。

onSubmit({value, valid}): void {
    if (valid) {
      console.log(value);
    } else {
      console.log('invalid form');
    }
  }

Answer 1

如果标志有效并且使用$ ngIf，则将其设置为true： HTML

<form #myForm="ngForm" (submit)="onSubmit(myForm)">
        <input type="text" class="form-control" required [(ngModel)]="fullname"          name="fullname" #input="ngModel">
        <div style="color:red" *ngIf="submittedError">
                Error
        </div>
        <br><br>
    <button type="submit">Post</button>
</form>

打字稿：

submittedError;
...  
onSubmit({value, valid}): void {
    if (valid) {
     this.submittedError=false;
      console.log(value);
    } else {
     this.submittedError=true;
      console.log('invalid form');
    }
  }
}

demo

Answer 2

你必须使用额外的标志才能做到这一点。

如下所示，

submitted = false;
onSubmit() { this.submitted = true; }

将submitted插入*ngIf语句。

参考： https://angular.io/guide/forms#toggle-two-form-regions-extra-credit

Answer 3

要添加到答案中：ngForm公开了已提交的标志。因此，只需创建一个模板变量，然后对错误执行ngIf（即ngForm.submitted === true）

Answer 4

在 onSubmit 方法中，迭代所有表单控件并将其标记为已触摸

$foo = "localhost/website/user/ABC/2";
$bar = str_replace("/admin","/user", $foo);
echo $bar;

以角度模板驱动的形式显示提交时的表单验证错误

4 个答案: