CODEWITHSUNDEEP
angularformsvalidationformgroups
macintosh
macintosh

Reputation: 3

How to display FormGroup error in Angular 8

I have a textarea, which is required and needs at least 10 characters. If the user clicks the button and these criteria are true, I'd like to display an error message.

Here is my HTML-Code:

<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:

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:

  1. "Input field is required"
  2. "Type at least 10 characters"

I'd like to display the errors only if the user has pressed the submit button.

Upvotes: 0

Views: 7355

Answers (3)

Anand Bhushan
Anand Bhushan

Reputation: 783

please find the code below-

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

Upvotes: 0

Shikha
Shikha

Reputation: 551

Add below in css file

.invalid {
    border-color: red;
    }

Add below code in ts file

<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>

Upvotes: 0

Nadhir Falta
Nadhir Falta

Reputation: 5257

Try this:

public isSubmitted;

and inside your submit() function set that variable to true. and then in your html add it to your conditions.

<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>

Upvotes: 0

Related Questions