Input validation on textarea click angular

Question

I have one input textbox and and a text area in a form. If I click on textarea I need to validate input textbox is not empty, if empty, the text area should be disabled and I should show a validation message in below the input text field.

onClickvalidate(name: string) {

    this.noContentError = "";

    this.noName = name;
    if (this.noName == '') {
        this.noContent = true;

        //this.noContentError = "Please provide a name."
        this.name.setErrors({
            noContent: `Please provide a name `
        });


    } else {
        this.noContent = false;

        this.name.setErrors(null);
    }

}

<div class="row">
<div class="col-md-3">
   <label for="name"> Name</label>
   <input pInputText class="input" id="name" formControlName="name" placeholder="Name" type="text" />
   <div *ngIf="name.invalid && name.touched" class="">
      <div *ngIf="this.noContent" class="alert alert-danger alert-duplicate">
         {{this.noContentError}}
      </div>
   </div>
   <div class="col-md-6 ">
      <label for="content">Input Text</label>
      <div class="textarea-content">
         <textarea pInputTextarea class="text-area" rows="1" id="content" formControlName="content" [readonly]="!name.value" placeholder="content is required"  (click)="onClickvalidate(name.value)" (change)="textFormatting()"></textarea>
         <div *ngIf="content.invalid && name.value">
            <span *ngIf="!content.value" class="">Content Required</span>
         </div>
      </div>
   </div>
</div>

I tried to add the validation using setErrors, but not working. Please suggest how can I achieve this.

Does [disabled]="name.invalid && name.touched" not work as you'd require on the text area? — Austin T French
– Austin T French, Commented Feb 17, 2021 at 19:38
Textarea will be disabled but i have to show validation message below the text box. that part is not working. — sarasm
– sarasm, Commented Feb 18, 2021 at 1:58
@sarasm please check my answer and let me know. Note: I have used readonly instead of disabled. — Srijon Chakraborty
– Srijon Chakraborty, Commented Feb 18, 2021 at 5:01

Srijon Chakraborty · Accepted Answer · 2021-02-18 05:00:33Z

1

I think I have a solution for you. Though the code is not that efficient but it works as you asked for. Please check the code and demo link of stackblitz given below=>
Stackblitz Demo Code link
TS:

onClickInput(){
      this.showerror=false;
    }
    isTextAreaReadonly(){
      let temp=this.registerForm.get('firstName').value;
      
      if(temp.length>=1){
        return false;
      }
      else{
        return true;
      }
    }
    onClickvalidate(){
        let temp=this.registerForm.get('firstName').value;
      
         if(temp.length>=1){
        this.showerror=false;
      }
      else{
        this.showerror=true;
      }
    }

HTML:

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-row">
   <div class="form-group col-5">
      <label>First Name</label>
      <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" (click)="onClickInput()" />
      <div *ngIf="showerror" >
         <div *ngIf="showerror" style="font-size:10px;color:red">First Name is required*</div>
      </div>
   </div>
   <div class="col-md-6 ">
      <label for="content">Input Text</label>
      <div class="textarea-content">
         <textarea  class="text-area" rows="1" id="content" formControlName="content" placeholder="content is required"  (click)="onClickvalidate()" [readonly]="isTextAreaReadonly()"></textarea>
         <div *ngIf="submitted && f.content.errors" class="invalid-feedback">
            <div *ngIf="f.content.errors.required">Content Required</div>
         </div>
      </div>
   </div>
</div>
<div class="text-center">
   <button class="btn btn-primary mr-1">Register</button>
   <button class="btn btn-secondary" type="reset" (click)="onReset()">Cancel</button>
</div>
</form>

answered Feb 18, 2021 at 5:00

Srijon Chakraborty

2,1622 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sarasm Over a year ago

Hi Linker, i got an issue now in the code. In my case firstName and content both are required. So if i click on firstName and not entered any data, required validation error"First Name is required*" will display. if i click on the content and again will get the same error 'First Name is required*'just below the firstname. Is there anyway i can avoid that?

Collectives™ on Stack Overflow

Input validation on textarea click angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related