Как применить проверку формы без тега <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>, но я считаю этот подход очень ценным, когда я хочу использовать шаблонные формы, сохраняя при этом простой способ проверки группы полей вместе.
