Как применить проверку формы без тега <form> в Angular2

Мне было интересно, есть ли способ проверить форму в Angular 2 без использования тега form? Например, ниже я хочу сделать это обязательным полем

<div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name">
</div>
<button type="button" class="btn btn-default" (click)="save()">Save</button>

Ответ 1

Элементы управления формами могут быть автономными (без родительской формы), будь то с помощью элементов декларативной формы или элементов управления реактивной формой.

Для декларативного (используя ngModel) вы можете просто сделать что-то вроде

<input #model="ngModel" [(ngModel)]="value" type="text" required/>
<div *ngIf="model.invalid" style="color: red">Required</div>

Для реактивных форм вы можете сделать что-то вроде

<input [formControl]="control" [(ngModel)]="value" type="text"/>
<div *ngIf="control.invalid" style="color: red">Required</div>

// in component
this.control = new FormControl('', [Validators.required]);

См. Plunker

Подробнее об использовании форм Angular в целом см. документ/учебник

Ответ 2

Помимо использования элементов управления формы непосредственно, как показано в его ответе @peeskillet, вы можете приложить директиву формы к любому тегу с помощью селектора ngForm:

<div ngForm #newRuleForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name">
  </div>
  <button type="button" class="btn btn-default" [disabled]="!newRuleForm.valid" (click)="save()">Save</button>
</div>

Помните, что в этом случае вы не можете использовать стандартные функции формы, такие как <button type=submit>, но я считаю этот подход очень ценным, когда я хочу использовать шаблонные формы, сохраняя при этом простой способ проверки группы полей вместе.