Angular 文本区域上的输入验证单击角度

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

onClickvalidate（名称：string）{
this.noContentError=“”；
this.noName=名称；
if（this.noName==''）{
this.noContent=true；
//this.noContentError=“请提供名称。”
this.name.setErrors({
noContent:`请提供一个名称`
});
}否则{
this.noContent=false；
this.name.setErrors（null）；
}
}

名称
{{this.noContentError}}
输入文本
所需内容

我想我有一个解决方案给你。虽然代码没有那么有效，但它可以按照您的要求工作。请检查下面给出的stackblitz的代码和演示链接=>

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:

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

名字
名字是必需的*
输入文本
所需内容
登记
取消
[disabled]=“name.invalid&&name.toucted”
在文本区域中是否不起作用？文本区域将被禁用，但我必须在文本框下方显示验证消息。那部分不起作用。@sarasm请检查我的答案并告诉我。注意：我使用了
readonly
而不是
disabled
。谢谢，它的链接器工作正常，我现在在代码中遇到了一个问题。在我的情况下，名字和内容都是必需的。因此，如果我单击firstName，但没有输入任何数据，则会显示必需的验证错误“firstName is required*”。如果我点击内容，再次出现相同的错误“firstname is required*”就在firstname的下方。有什么我可以避免的吗？