Проверка поля дочерней формы Angular
У меня есть существующий код, который более или менее структурирован так:
<!-- my-form.html -->
<form ngNativeValidate>
<my-other-component></my-other-component>
<button mat-button type='submit'>Submit</button>
</form>
<!-- my-other-component.html -->
<input name='native-input' required />
<mat-form-field>
<mat-select name='balls' required>
<mat-option value='a'>a</mat-option>
<mat-option value='b'>b</mat-option>
<mat-option value='c'>c</mat-option>
</mat-select>
</mat-form-field>
Проблема: в то время как собственный ввод проверяется правильно - браузер отображает «Пожалуйста, заполните это поле». запрашивать при отправке, когда это необходимо - пустой ввод в balls с радостью принимается.
Поведение ngNativeValidate, показывающее общие / не описательные ошибки только при отправке, пока нормально, и у нас нет времени преобразовывать все в угловую форму с настраиваемыми сообщениями проверки, так что это не вариант. Я ищу способ переключиться с собственной проверки на проверку Angular с наименьшими усилиями для поддержания приемлемого UX - например, просто отключив кнопку отправки, пока форма не станет действительной.
Что касается angular.io/guide/form-validation, я вижу, что могу изменить ngNativeValidate на #myForm='ngForm' и добавить [disabled]='myForm.invalid' в кнопку отправки. Однако эта проверка применяется только к полям формы непосредственно в my-form.html, а не к полям в my-other-component.
Документация здесь действительно скудная, поэтому я не уверен, что попробовать дальше. Кто-нибудь знает, можно ли настроить ngForm для проверки полей формы этих дочерних компонентов?
Я не видел очевидного способа применить специальный валидатор к этой проблеме, основываясь на моем чтении документации, но @yurzui придумал именно то, что я искал ниже.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы хотите использовать подход, основанный на шаблонах, вам необходимо импортировать FormsModule в ваш @NgModule и применить директиву NgModel ко всем вашим элементам управления.
<input name='native-input' ngModel required />
^^^^^^^
<mat-form-field>
<mat-select name='balls' ngModel required>
^^^^^^^
<mat-option value='a'>a</mat-option>
<mat-option value='b'>b</mat-option>
<mat-option value='c'>c</mat-option>
</mat-select>
</mat-form-field>
Теперь ваш дочерний компонент должен знать о родительской форме. Для этого вам необходимо предоставить токен ControlContainer в массиве viewProviders:
@Component({
selector: 'my-other-component',
template: `
...
`,
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class MyOtherComponent {
Смотрите также:
Это было именно то, что мне было нужно. Большое спасибо! ng-run, кстати, выглядит потрясающе.
Как насчет того, чтобы вам нужна реактивная форма вместо формы на основе шаблонов? Не могли бы вы привести пример этого?
@olefrank Он должен сильно отличаться от шаблонного. Вы можете найти примеры здесь stackoverflow.com/questions/39242219/…
Вы пробовали собственный валидатор?