Question

我在angular2页面中有以下字段（我没有使用表单）。

<input id="firstname" name="firstname" class="field-input field-validation-input" [(ngModel)]="firstname"
                    placeholder="First name" spellcheck="false" required #firstNameField>

现在我想在字段底部显示一条消息，如果它是无效的，在这种情况下如果它是空的。执行此操作的最佳方法是什么，我可以使用firstNameField.className但是您可以看到这里有许多类并且尝试过滤ng-invalid可能是个问题

Answer 1

使用

#firstNameField="ngModel"

以便此模板变量引用NgModel指令，从而可以访问其所有属性和方法：

<div *ngIf="!firstNameField.valid">Houston, we have a problem</div>

或

<div *ngIf="firstNameField.hasError('required')">The first name is required</div>

Answer 2

为什么不使用表单和Angular内置的验证功能？

如果没有表单，您可以在setter中为执行验证的firstname字段编写一些代码并设置消息。然后，您可以添加元素以在设置消息时显示消息。

在组件中：

   message: string;
   _firstName: string;
   get firstName(): string {
      return this._firstName;
   }
   set firstName(value: string) {
      this._firstName = value;
      // Validation here
      // If validation does not pass
      {
         message = "Please enter a valid value";
      }
   }

如果字段值无效，则angular2显示消息

2 个答案: