Question

我有以下textarea：

<textarea class="form-control" [(ngModel)]="content" name="content" required>
        </textarea>

和以下提交按钮：

 <button type="submit" class="btn btn-default" [disabled]="content.valid">New comment</button>

正如我在角度2表单指南（https://angular.io/docs/ts/latest/guide/forms.html）中看到的那样，我可以使用x.valid来检查它是否为空。

为什么我会收到TypeError: Cannot read property 'valid' of undefined错误？

Answer 1

在您的情况下，内容是您模型的属性。

为了做你想做的事，你需要使用template reference value作为表单控件 #myControl =＆＃34; ngModel＆＃34; ，然后你就可以访问有效的了property： myControl.valid 。

所以在你的例子中：

<textarea class="form-control" [(ngModel)]="content"
          name="content" required #myControl="ngModel">
</textarea>

并在按钮标记中使用它：

<button type="submit" class="btn btn-default" 
[disabled]="myControl.valid">New comment</button>

Answer 2

<div class="form-group">
    <label for="inputEmail" class="col-lg-2 control-label">Email</label>
    <div class="col-lg-10">
        <input type="text" class="form-control" id="name" placeholder="Name" minlength="4" maxlength="24"  [(ngModel)]="name" name="email" #myName="ngModel" required>
            <div *ngIf="myName.errors && (myName.dirty || myName.touched)" class="alert alert-danger">
                <div [hidden]="!myName.errors.required">
                    Name is required
                </div>
                <div [hidden]="!myName.errors.minlength">
                    Name must be at least 4 characters long.
                </div>
                <div [hidden]="!myName.errors.maxlength">
                    Name cannot be more than 24 characters long.
                </div>
            </div>
    </div>
</div>

Answer 3

由于使用ng-if，因此出现了此问题。我改用ng-hide解决了它。

ng-hide设置DOM可见性为false，但是ng-if完全删除DOM。也许这就是为什么当使用ng-if时angularjs无法看到要验证的表单

Answer 4

在我的情况下，我从＃myName =“ ngModel”中删除了ngModel以使其正常工作。 Angualr版本5.2.11

Answer 5

您可以使用ngModelChange作为解决方法：

<input type="text" [ngModel]="model.property (ngModelChange)="detectChanges($event, model, validation)" #validation="ngModel" required validation>

在您的组件中：

 detectChanges(newVal, model, validation): void {
     if (validation.valid) model._valid = true;
     else model._valid = false;
 }

当您使用*ngFor显示很多输入字段并想分别验证它们时，这可以为您提供更大的灵活性。

TypeError：无法读取属性＆＃39;有效＆＃39;未定义的

5 个答案: