Ng-content в теге формы
У меня есть компонент формы с тегом <ng-content> внутри и btn, который в настоящее время ничего не делает. Также у меня есть родительский компонент, который использует его с простым вводом в качестве проекции контента.
Проблема в том, что всякий раз, когда я нажимаю на кнопку, и родительский компонент, и компонент формы перезагружаются, а страница обновляется с начальным состоянием.
formComponent.html:
<form class = "form-control">
<div class = "form-group">
<ng-content></ng-content>
<button type = "submit">Search</button>
</div>
</form>
parentComponent.html:
<app-form-component>
<input type = "text" [(ngModel)] = "car.id">
</app-form-component>
Я чувствую, что скучаю по чему-то элементарному, связанному с контент-проекцией.
sackblitz: https://stackblitz.com/edit/angular-zqjxjs
@Justcode Я хотел выполнить излучение, но потом заметил такое поведение.
Можете ли вы создать пример stackblitz для воспроизведения проблемы?
@Justcode sackblitz добавил stackblitz.com/edit/angular-zqjxjs
Ответы 1
Просто для предложения, проблема в том, что вы объявили тип кнопки как Отправить
<button type = "submit">Search</button>
Итак, если вы объявили тип кнопки как submit, он отправит такую форму. Я тоже столкнулся с такой проблемой. Так что просто замените,
html файл
<button type = "button" (click) = "doLogic()">Search</button>
ts файл
doLogic(){
//do your logics here.
}
Надеюсь, это решит вашу проблему. Давайте попробуем один раз и дадим мне знать.
Спасибо,
Мутукумар
@Muthukumar спасибо, что решили это! но я замечаю что-то странное; так почему, если я использую: type = "submit" без content-projection, он не перезагружает мою страницу?
Это основные вещи кнопки формы и отправки.
Пожалуйста, измените вот так и используйте. Отметьте как ответ, если ваша проблема решена.
Я просто заметил, что забыл импортировать FormsModule. поэтому введите submit, не перезагружая страницу.
Разве вы не можете удалить его, если он ничего не делает?