仅在表单提交后显示错误信息
Show errors messages only after form submit
我正在创建 Angular 6 表单并进行验证。我只想在提交表单后显示错误消息。重要的事实是消息在输入过程中不应该改变。因此,例如,当用户没有在输入中输入任何内容然后提交表单时,应该会出现所需的消息。之后,当用户输入内容时,消息应该一直可见,直到按下下一次提交按钮。此外,当先前的规则得到满足时,错误消息不应更改为另一个。老实说,我不知道是否可以使用 Reactive Forms。
app.component.html
<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm">
<input class="input" type="text" formControlName="firstName" />
<p *ngIf="form.get('firstName').hasError('required') && myform.submitted">
Name is required
</p>
<p *ngIf="form.get('firstName').hasError('minlength') && myform.submitted">
Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}
</p>
<button type="submit">Submit</button>
</form>
app.component.ts
export class AppComponent {
form: FormGroup
constructor(private fb: FormBuilder,) {
this.form = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(5)]]
});
}
submit() {
console.log(this.form);
}
}
演示:stackblitz
感谢您的帮助!
您可以像这样在提交函数中检查验证:
<p *ngIf="requiredError">
Name is required
</p>
<p *ngIf="invalid">
Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}
</p>
invalid: boolean;
requiredError: boolean;
submit() {
console.log(this.form);
this.invalid = this.form.get('firstName').hasError('minlength');
this.requiredError = this.form.get('firstName').hasError('required');
}
从 Angular 7 开始,您可以使用:{updateOn:'submit'} 或 {updateOn:'blur'}
*Update 使用新的 FormGroup 和新的 FormControl(使用 formBuilder 无效)
当你想更正错误时使用{updateOn:'blur'}输入失去焦点,{updateOn:'submit'}如果它只在提交时使用
this.form = new FormGroup({
firstName:new FormControl('',
[Validators.required, Validators.minLength(5)])
},{updateOn:'submit'});
*更新 2 如果您想与 formBuilder 一起使用,请参阅
我正在创建 Angular 6 表单并进行验证。我只想在提交表单后显示错误消息。重要的事实是消息在输入过程中不应该改变。因此,例如,当用户没有在输入中输入任何内容然后提交表单时,应该会出现所需的消息。之后,当用户输入内容时,消息应该一直可见,直到按下下一次提交按钮。此外,当先前的规则得到满足时,错误消息不应更改为另一个。老实说,我不知道是否可以使用 Reactive Forms。
app.component.html
<form [formGroup]="form" novalidate (ngSubmit)="submit()" #myform="ngForm">
<input class="input" type="text" formControlName="firstName" />
<p *ngIf="form.get('firstName').hasError('required') && myform.submitted">
Name is required
</p>
<p *ngIf="form.get('firstName').hasError('minlength') && myform.submitted">
Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}
</p>
<button type="submit">Submit</button>
</form>
app.component.ts
export class AppComponent {
form: FormGroup
constructor(private fb: FormBuilder,) {
this.form = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(5)]]
});
}
submit() {
console.log(this.form);
}
}
演示:stackblitz
感谢您的帮助!
您可以像这样在提交函数中检查验证:
<p *ngIf="requiredError">
Name is required
</p>
<p *ngIf="invalid">
Min length of string is {{form.controls.firstName.errors.minlength.requiredLength}}
</p>
invalid: boolean;
requiredError: boolean;
submit() {
console.log(this.form);
this.invalid = this.form.get('firstName').hasError('minlength');
this.requiredError = this.form.get('firstName').hasError('required');
}
从 Angular 7 开始,您可以使用:{updateOn:'submit'} 或 {updateOn:'blur'}
*Update 使用新的 FormGroup 和新的 FormControl(使用 formBuilder 无效)
当你想更正错误时使用{updateOn:'blur'}输入失去焦点,{updateOn:'submit'}如果它只在提交时使用
this.form = new FormGroup({
firstName:new FormControl('',
[Validators.required, Validators.minLength(5)])
},{updateOn:'submit'});
*更新 2 如果您想与 formBuilder 一起使用,请参阅