Мне тяжело пытаться использовать как * ngIf внутри формы, так и ngFormModel для проверки указанной формы.
Используйте случай: на основе ввода пользователя, скрыть или деактивировать некоторые конкретные поля в форме. Но в случае показа этих входов они должны быть проверены.
Если требуется только базовая проверка, я могу сделать так или иначе:
- Если вход требуется только, он работает A-OK с помощью
ngControl
иrequired
- Если необходим конкретный формат, можно использовать атрибут
pattern
. Это не Angular, но он работает.
Но для того, чтобы реализовать более сложные проверки, я пытался использовать ngControl
, связанный с ngFormModel
, чтобы использовать пользовательские проверки. Я использовал фрагменты кода, найденные на следующих страницах:
Как добавить шаблон проверки формы в angular2 (и ссылки, на которые они ссылаются)
Angular2 Формы: проверки, ngControl, ngModel и т.д.
Мой код выглядит следующим образом:
HTML
<div>
<h1>Rundown of the problem</h1>
<form (ngSubmit)="submitForm()" #formState="ngForm" [ngFormModel]="myForm">
<div class="checkbox">
<label>
<input type="checkbox" [(ngModel)]="model.hideField" ngControl="hideField"> Is the input below useless for you ?
</label>
</div>
<div *ngIf="!model.hideField">
<div class="form-group">
<label for="optionalField">Potentially irrelevant field </label>
<input type="text" class="form-control" [(ngModel)]="model.optionalField" ngControl="optionalField" required #optionalField="ngForm">
<div [hidden]="optionalField.valid || optionalField.pristine" class="alert alert-warning">
This input must go through myCustomValidator(), so behave.
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!formState.form.valid">I can't be enabled without accessing the input :(</button>
<button type="submit" class="btn btn-default">Submit without using form.valid (boo !)</button>
</form>
</div>