Angular 8 приложение не может получить значение поля формы при использовании router.navigate

Question

У меня есть приложение Angular 8, которое использует формы с маршрутизацией и шаблонами.

У меня есть простая форма в компоненте. html:

<form (ngSubmit)="onSubmit(serviceForm)" #serviceForm="ngForm">
  <input type="text" name="endpoint" ngModel>
  <button class="btn btn-success" type="submit">Submit</button>
</form>

Обработчик в component.ts:

onSubmit(serviceForm:NgForm){
  console.log(serviceForm);
  this.router.navigate(['/view-service']);
 }

«Конечная точка» недоступна в ngForm.value, когда я вызываю инструкцию navigate после console.log (). Вот вывод из console.log:

NgForm {передано: true, _directives: Array (1), ngSubmit: EventEmitter, form: FormGroup}
formDirective: (...)
control : (...)
путь: (...)
элементы управления: (...)
значение: объект
__proto__: объект
действительный: ( ...)
неверно: (...)
в ожидании: (...)
отключено: (...)
включено: (...)
ошибки: ( ...)
нетронутый: (...)
грязный: true
затронут: true
статус: (...)
нетронутый: (...)
statusChanges : (...)
valueChanges: (...)
отправлено: true

Если я не вызываю оператор навигации, он доступен.

Я не понимаю, я печатаю на консоль, прежде чем начать навигацию.

Что я здесь не так делаю?

Спасибо!

Answer 1

Это потому, что вы смотрите на форму, но то, что вы хотите , является значением c, указанным в форме. Измените свой код на следующий:

onSubmit(serviceForm: NgForm){
  console.log(serviceForm.value.endpoint);
}

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

Изменить, чтобы ответить на отредактированный вопрос

Вы регистрируете ссылку на свой объект формы , но к тому времени, когда вы проверяете его в инструментах разработки, вы уже ушли со страницы, и значения формы, таким образом, недоступны. Это объясняется в MDN Web Docs . В частности:

Пожалуйста, имейте в виду, что если вы регистрируете объекты в последних версиях Chrome и Firefox, то, что вы регистрируетесь на консоли, это ссылка на объект, который не обязательно является «значением» объекта в момент времени, когда вы вызываете console.log (), но это значение объекта в момент, когда вы открываете консоль.

Попробуйте MDN:

Регистрация объектов

Не используйте console.log(obj), используйте console.log(JSON.parse(JSON.stringify(obj))).