Угловая форма не определена при отправке через ngSubmit

У меня есть форма, описанная в моем файле app.component.html, как показано ниже, когда я нажимаю кнопку «Отправить», чтобы отправить форму, я получаю сообщение об ошибке в своем Javascript, говорящее, что форма чата не определена.

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

Также, когда я отправляю форму, как мне получить значение ввода, которое присутствует в моей форме? У меня есть имя message, определенное в форме, как я могу использовать эту переменную?

app.component.html

<div class="container">
    <h2>Message Form</h2>
    <form (ngSubmit)="sendMessage(chatForm)" #chatForm="ngForm">
        <div>
            <label for="message">Message</label>
            <input type="text" id="message" name="message" [(ngModel)]="message" required>
        </div>
        <button type="submit" id="sendmessage" [disabled]="!chatForm.valid">
            Send
        </button>
    </form>
</div>

app.component.ts

public sendMessage(form): void {
    console.log("Message sent: " + form.value);
}

Вы определили @ViewChild('chatForm') form в app.component.ts?

ViqMontana 22.05.2019 15:56

@Viqas Я не знаю, где это должно быть определено?

Jake12342134 22.05.2019 15:57

Нет необходимости использовать ViewChild

Tony Ngo 22.05.2019 15:59
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
2
3
2 415
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны получить данные, используя

form.value.message

Мой пример выглядит так

  <form (ngSubmit)="onSubmit(registerForm)" #registerForm="ngForm">
    <div class="form-group">
      <label for="UserName">Your email</label>
      <input
        type="text"
        ngModel
        class="form-control"
        id="UserName"
        name="UserName"
        required
      />

Затем в моем компоненте я могу получить доступ к данным формы, подобным этому

onSubmit(formValue: NgForm) {
    const registerModel: AccountModel = {
      UserName: formValue.value.UserName,
      Password: formValue.value.Password
    };

Я отредактировал свой код, и теперь он работает и отправляется правильно, спасибо! Я добавил несколько разных вещей, поэтому я не уверен, какая из них вызвала ошибку. Было ли это потому, что я не определял formValue: NgForm в своей функции? Или это было из-за того, что мне не хватало form-group и form-control в моем HTML? Или это потому, что у меня было [(ngModel)] = message вместо просто ngModel?

Jake12342134 22.05.2019 16:05

Я думаю, что ошибка возникла из-за вашего [(ngModel)] = message, потому что вы используете двухстороннюю привязку.

Tony Ngo 22.05.2019 16:07

Другие вопросы по теме