点击文本区域的输入验证 angular

Question

我有一个输入文本框和一个表单中的文本区域。如果我点击文本区域，我需要验证输入文本框是否为空，如果为空，文本区域应该被禁用，我应该在输入文本字段下方显示验证消息。

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>

我尝试使用 setErrors 添加验证，但没有用。请建议我怎样才能做到这一点。

Answer 1

我想我有一个解决方案。尽管代码效率不高，但可以按您的要求工作。请检查下面给出的 stackblitz 的代码和演示 link=>
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>

点击文本区域的输入验证 angular

Input validation on textarea click angular

validation

textarea

angular