Question

我正在使用文本区域来显示字符串中的地址作为预填充的输入字段。

HTML

  <mat-form-field>
        <textarea matInput placeholder="Address" formControlName="businessaddress"  value="{{address}}"></textarea>
             <mat-error *ngIf="businessForm.controls.businessaddress.hasError('required')">
                 Please enter business address
              </mat-error>
    </mat-form-field>

TS

 address = `#91,MG Road,Banglore`;

我正在验证文本区域并使用mat-error显示错误消息，如 HTML

所示

  businessaddress: [null, [Validators.required]],

如果我输入输入字段（文本区域）并离开，则现在显示错误消息。但是，如果我删除输入字段内容i，e（预填充数据 value =“ { {address}}“ ），那么只能显示错误消息。该怎么办？

Answer 1

不是将value属性添加到textarea，而是将地址的值添加到formControl：

businessaddress: [address, [Validators.required]],

这应该为您解决问题，因为如果您设置值属性，并不意味着在formControl中设置了值

edit：在您的情况下，您只需设置输入字段的value属性，但是表单和该字段未连接，则可以使用模板表单或尝试使用反应形式方法。有关更多详细信息，我可以推荐此博客文章： https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

Answer 2

无需设置value="{{address}}之类的控制值：

将控制值初始化为：

businessaddress: this.formBuilder.control(address, [Validators.required]),

HTML：

 <mat-form-field>
    <textarea matInput placeholder="Address" formControlName="businessaddress"></textarea>
       <mat-error *ngIf="businessForm.controls.businessaddress.hasError('required') && businessForm.controls.businessaddress.touched">
                 Please enter business address
       </mat-error>
 </mat-form-field>

如何为预填写的输入字段添加错误消息

2 个答案: