textarea点击角度的输入验证

Posted 2023-05-07

【中文标题】textarea点击角度的输入验证

【英文标题】：Input validation on textarea click angular

【发布时间】：2021-05-20 17:49:11

【问题描述】：

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

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 添加验证，但不工作。请建议我怎样才能做到这一点。

【问题讨论】：

[disabled]="name.invalid && name.touched" 在文本区域中是否无法正常工作？

Textarea 将被禁用，但我必须在文本框下方显示验证消息。那部分不工作。

@sarasm 请检查我的答案并告诉我。注意：我使用了readonly 而不是disabled。

【参考方案1】：

我想我有一个适合你的解决方案。虽然代码效率不高，但它可以按照您的要求工作。请检查下面给出的stackblitz的代码和演示链接=> 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>

【讨论】：

嗨 Linker，我现在在代码中遇到了问题。在我的情况下，名字和内容都是必需的。因此，如果我单击 firstName 并且未输入任何数据，则会显示所需的验证错误“First Name is required*”。如果我单击内容并再次在名字下方出现相同的错误“需要名字*”。无论如何我可以避免这种情况吗？