TypeError: Не удается прочитать свойство "valid" из undefined

У меня есть следующее текстовое поле:

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

и следующую кнопку отправки:

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

Как я увидел в руководстве angular 2 (https://angular.io/docs/ts/latest/guide/forms.html), я могу использовать x.valid, чтобы проверить, не является ли он пустым.

Почему я получаю ошибку TypeError: Cannot read property 'valid' of undefined?

Ответ 1

В вашем случае content является свойством вашей модели.

Чтобы сделать то, что вам нужно, вам нужно использовать значение ссылки на шаблон для элемента управления # myControl = "ngModel", а затем у вас есть доступ к действительным свойство: 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>

Ответ 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>