我制作了以下表格和相关验证控件：
<div class="row page-titles">
<div class="col-md-5 align-self-center">
<h3 class="text-themecolor">Agente</h3>
</div>
<div class="col-md-7 align-self-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="">Home</a>
</li>
<li class="breadcrumb-item">
<a href="">Agenti</a>
</li>
<li class="breadcrumb-item">
<a href="">Aggiungi nuovo agente</a>
</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<form action="#" #formAggiuntaUser="ngForm" class="form-horizontal" ngNativeValidate>
<div class="form-body">
<div class="row m-t-20">
<div class="col-md-6">
<div class="form-group row text-center">
<label class="control-label text-right col-md-4">Nome</label>
<div class="col-md-7">
<input class="form-control" type="text" name="nome" #nomeField="ngModel" [(ngModel)]="agente.name"
required>
<div class="alert alert-danger" *ngIf="nomeField.errors">
<div class="text-left" [hidden]="!nomeField.hasError('required')">
Nome è richiesto.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Cognome</label>
<div class="col-md-7">
<input class="form-control" type="text" name="cognome" #cognomeField="ngModel"
[(ngModel)]="agente.surname" required>
<div class="alert alert-danger" *ngIf="cognomeField.errors">
<div [hidden]="!cognomeField.hasError('required')">
Cognome è richiesto.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Via</label>
<div class="col-md-7">
<input class="form-control" type="text" name="indirizzo" #indirizzoField="ngModel"
[(ngModel)]="agente.indirizzo" required>
<div class="alert alert-danger" *ngIf="indirizzoField.errors">
<div [hidden]="!indirizzoField.hasError('required')">
Indirizzo è richiesto.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Numero civico</label>
<div class="col-md-7">
<input class="form-control" type="text" name="civico" #civicoField="ngModel"
[(ngModel)]="agente.civico" required>
<div class="alert alert-danger" *ngIf="civicoField.errors">
<div [hidden]="!civicoField.hasError('required')">
Numero civico è richiesto.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Città</label>
<div class="col-md-7">
<input class="form-control" type="text" name="città" #cittaField="ngModel"
[(ngModel)]="agente.citta" required>
<div class="alert alert-danger" *ngIf="cittaField.errors">
<div [hidden]="!cittaField.hasError('required')">
Città è richiesta.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Provincia</label>
<div class="col-md-7">
<input class="form-control" type="text" name="provincia" #provinciaField="ngModel"
[(ngModel)]="agente.provincia" required>
<div class="alert alert-danger" *ngIf="provinciaField.errors">
<div [hidden]="!provinciaField.hasError('required')">
Provincia è richiesta.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Email</label>
<div class="col-md-7">
<input class="form-control" type="email" name="email" [(ngModel)]="agente.email"
#emailField="ngModel"
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" email required>
<div class="alert alert-danger" *ngIf="emailField.errors">
<div [hidden]="!emailField.hasError('required')">
Email è richiesta.
</div>
<div [hidden]="!emailField.hasError('pattern')">
Inserire una email valida.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Numero di telefono</label>
<div class="col-md-7">
<input class="form-control"
type="tel" name="telefono" #telefono="ngModel"
pattern="[0-9]*"
#telField="ngModel"
[(ngModel)]="agente.telefono" required>
<div class="alert alert-danger" *ngIf="telField.errors">
<div [hidden]="!telField.hasError('required')">
Numero di telefono è richiesto.
</div>
<div [hidden]="!telField.hasError('pattern')">
Inserire un numero di telefono corretto.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col-md-4">Password</label>
<div class="col-md-7">
<input class="form-control" type="password" name="password" #passField="ngModel"
[(ngModel)]="agente.password" required>
<div class="alert alert-danger" *ngIf="passField.errors">
<div [hidden]="!passField.hasError('required')">
Password è richiesta.
</div>
</div>
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->
<!--/row-->
</div>
<hr>
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
</div>
<div class="col-md-3">
<button type="submit" [disabled]="!formAggiuntaUser.form.valid" (click)="addUser()" class="btn btn-info"><i
class="fa fa-plus"></i> Aggiungi agente
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
但我有一个非常大的问题：所有必需的错误立即出现在开头，而我想只在用户模糊输入时显示所需的错误。 我真的不知道我怎么能最初重置错误... 有人可以帮帮我吗？
答案 0 :(得分：0)
您可以在隐藏错误消息时检查输入是原始的还是有效的。这意味着已触摸或更改输入。 例如：
<div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
在你的情况下：
<div [hidden]="!civicoField.hasError('required') || civicoField.pristine ">
Numero civico è richiesto.
</div>
答案 1 :(得分：0)
<form [ngFormOptions]="{updateOn: blur}">
...
</form>
它是在Angular 5.0中引入的。您可以阅读更多相关信息here