[英]How to display FormGroup error in Angular 8
I have a textarea, which is required and needs at least 10 characters.我有一个 textarea,它是必需的,至少需要 10 个字符。 If the user clicks the button and these criteria are
true
, I'd like to display an error message.如果用户单击按钮并且这些条件为
true
,我想显示一条错误消息。
Here is my HTML-Code:这是我的 HTML 代码:
<form [formGroup]="formGrp" (submit)="onSubmit()">
<div class="input-field input-field--multiline">
<textarea
rows="2"
[formControl]="requestAccessMessageCtrl"
[attr.placeholder]="Your message">
</textarea>
<!--add error message here-->
</div>
<div class="button-group button-group--responsive request__btn">
<button class="button button--primary" type="submit">Send</button>
</div>
</form>
And here is my TypeScript:这是我的 TypeScript:
readonly requestAccessMessageCtrl = new FormControl(null, {
validators: [Validators.required, Validators.minLength(10)],
})
readonly formGrp = new FormGroup({ message: this.requestAccessMessageCtrl })
onSubmit() {
if (this.requestAccessMessageCtrl.invalid) {
return;
}
this.userService.postActivity(
this.requestAccessMessageCtrl.value,
)
}
What do I have to add to display two error messages:我必须添加什么才能显示两条错误消息:
I'd like to display the errors only if the user has pressed the submit button.我只想在用户按下提交按钮时显示错误。
Try this:尝试这个:
public isSubmitted;
and inside your submit()
function set that variable to true.并在您的
submit()
function 中将该变量设置为 true。 and then in your html add it to your conditions.然后在您的 html 中将其添加到您的条件中。
<div class="text-danger" *ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.minlength ">
<small>Need at least 10 characters</small>
</div>
<div class="text-danger" *ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.required">
<small>Field is required</small>
</div>
Add below in css file在 css 文件中添加以下内容
.invalid {
border-color: red;
}
Add below code in ts file在 ts 文件中添加以下代码
<div class="input-field input-field--multiline">
<textarea rows="2"
[ngClass]="{'invalid':isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.minlength}"
[formControl]="requestAccessMessageCtrl" [attr.placeholder]="Your message">
</textarea>
<div class="text-danger"
*ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.minlength ">
<small>Need at least 10 characters</small>
</div>
<div class="text-danger"
*ngIf="isSubmitted && requestAccessMessageCtrl.invalid && requestAccessMessageCtrl.errors?.required">
<small>Field is required</small>
</div></div>
<div class="button-group button-group--responsive request__btn">
<button class="button button--primary" type="submit">Send</button>
</div>
please find the code below-请在下面找到代码-
html- html-
<form [formGroup]="formGrp">
<div class="input-field input-field--multiline">
<textarea
rows="2"
formControlName="message"
>
</textarea>
<div *ngIf="showError">
<span *ngIf="formGrp.get('message').errors?.required">Input field is required</span>
<span *ngIf="formGrp.get('message').errors?.minlength">Type at least 10 characters</span>
</div>
<!--add error message here-->
</div>
<div class="button-group button-group--responsive request__btn">
<button class="button button--primary" (click)="onSubmit()"type="submit">Send</button>
</div>
</form>
and in the component-在组件中-
showError = false;
onSubmit() {
if (this.requestAccessMessageCtrl.invalid) {
this.showError = true;
return;
}
this.showError = false;
}
Here is a stackblitz demo这是一个stackblitz演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.