Форма остается недействительной после подачи angular 9 - PullRequest
Новая
       6

Форма остается недействительной после подачи angular 9

0 голосов
/ 05 апреля 2020

Я новичок в angular и просто делаю небольшое демонстрационное приложение в angular 9 и шаблон администратора coreui. У меня есть простая форма с одним текстовым полем и одной отключенной кнопкой. При загрузке страницы классы форм это 

<form _ngcontent-bcs-c113="" novalidate="" 
class="form-horizontal ng-untouched ng-pristine ng-invalid" ng-reflect-form="[object Object]">
</form>

после ввода текста в текстовое поле, моя форма выглядит следующим образом - 

<form _ngcontent-ruw-c113="" novalidate="" 
class="form-horizontal ng-dirty ng-valid ng-touched" ng-reflect-form="[object Object]">
</form>

, так как форма активна, кнопка включена, и я могу отправить сформироваться. Теперь внизу таблицы есть форма с одной кнопкой редактирования. При редактировании я заполняю форму данными строки и могу отправить ее снова, когда кнопка включена. При редактировании нажмите, чтобы моя форма выглядела следующим образом. 

<form _ngcontent-ruw-c113="" novalidate="" 
class="form-horizontal ng-valid ng-untouched ng-pristine" ng-reflect-form="[object Object]">
</form>

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

<form _ngcontent-ruw-c113="" novalidate="" 
class="form-horizontal ng-untouched ng-pristine ng-invalid" ng-reflect-form="[object Object]">
</form>

Теперь моя форма снова недействительна и кнопка отключена. Но когда я ввожу что-то в текстовое поле для повторной отправки данных, даже если проверка пройдена, моя форма остается недействительной, а кнопка остается отключенной, например, 

    <form _ngcontent-ruw-c113="" novalidate="" 
     class="form-horizontal ng-invalid ng-dirty ng-touched" ng-reflect-form="[object Object]">
    </form>

В моем компоненте я сбрасываю свою форму после вставки и обновления, как это --- 

this.rolesForm.reset(true);
 this.rolesForm.markAsPristine();

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

ссылка на стек -

https://stackblitz.com/edit/create-obwnjo?file=app / app.component. html

1 Ответ

1 голос
/ 05 апреля 2020

Проблема связана с кнопкой редактирования, вам нужно пометить ее как type = "button". Прямо сейчас, как только вы нажимаете кнопку редактирования, она вызывает метод edit (), а также метод create ().

И еще одна вещь, вам не нужно создавать новую группу FormGroup, когда пользователь нажимает кнопку редактирования. , Необходимо внести следующие изменения: 

<button class="btn btn-sm btn-danger" type="button" (click)="edit($event)"> Edit</button>

Я также внес изменения в файл класса компонента. Вы можете найти рабочий стек стека здесь: https://stackblitz.com/edit/create-2gqm2q

...