如何判断 Angular 8 应用程序中的 <textarea> 是否为空？答案

【问题标题】：How can I tell if a <textarea> is empty in an Angular 8 application?如何判断 Angular 8 应用程序中的 <textarea> 是否为空？
【发布时间】：2019-08-17 20:53:04
【问题描述】：

我有一个像这样的文本区域：

<div class="form-group">
          <label for="form_message">Message * (Minimum if 15 characters)</label>
          <textarea
            id="form_message"
            required
            class="form-control"
            placeholder="Message *"
            rows="6"
            formControlName="form_message"
          ></textarea>
          <div
            *ngIf="
              form_message.invalid &&
              (form_message.dirty || form_message.touched)
            "
            class="alert alert-danger"
          >
            <div *ngIf="form_message.errors.minlength">
              Message must be at least 15 characters.
            </div>
          </div>
        </div>
      </div>

在第一个*ngIf中我想查看<textarea>中的文字长度是否大于零，以防止<textarea>脏的时候出现没有文字的红框，但用户已删除所有文本。

我曾经用 ngModel 来做这个，但是已经被弃用了。

如何判断<textarea> 中没有文字？

【问题讨论】：

form_message.errors.required 在字段为空时为真。只要您使用所需的验证器。

标签： javascript angular typescript

【解决方案1】：

你can use ngModel这个用例

模板

<textarea
  id = "form_message"
  required
  class="form-control"
  placeholder = "Message *"
  rows = "6"
  formControlName = "form_message"

  [(ngModel)]="formMessage"
></textarea >

组件

let formMessage;

如果您有一个包含许多输入的大表单，take a look at angular reactive forms

【讨论】：

【解决方案2】：

我认为像this.FORM_NAME.get('form_message').value.trim().length 这样的东西应该可以解决问题。

【讨论】：

!this.FORM_NAME.get('form_message').value == true --> 如果文本区域为空或仅包含“”