тип ввода: отправить не работает в javascript?

Question

Я пытаюсь разработать форму, которая задает вопрос и имеет 2 варианта и, наконец, ввод типа отправки с использованием javascript.

HTML:

<div class="intro py-3 bg-white text-center">
  <div class="container">
    <h2 class="text-primary display-3 my-4">Ninja Quiz</h2>
  </div>
</div>

<div class=" quiz py-4 bg-primary">
  <div class="container">
    <h2 class="my-5 text-white">On with questions</h2>

    <form class="quiz-form text-light">
      <div class="my-5">
        <p class="lead font-weight-normal">
          1.How do you give Ninja Directions?
        </p>
        <div class="form-check my-2 text-white-50">
          <input type="radio" name="q1" id="q1" value="a" checked />
          <label for="q1" class="form-check-label">Show Them A map</label>
        </div>
        <div class="form-check my-2 text-white-50">
          <input type="radio" name="q1" id="q1" value="b" />
          <label for="q1" class="form-check-label"
            >Dont worry a ninja will find you</label
          >
        </div>
      </div>
      <div class="text-center">
        <input type="submit" class="btn btn-light" />
      </div>
    </form>
  </div>
</div>

Моя страница ts:

import { Component, OnInit } from '@angular/core';
const correctAnswers = ['b'];
const form = document.querySelector('.quiz-form');

@Component({
  selector: 'app-udemy',
  templateUrl: './udemy.component.html',
  styleUrls: ['./udemy.component.css'],
})

export class UdemyComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
  if(form) {
    form.addEventListener('submit', e => {
      console.log(form);
      e.preventDefault();
      let score = 0;
      const userAnswers = [form.q1.value];
      userAnswers.forEach((answer, index) => {
        if (answer === correctAnswers[index]) {
          score = 100;
        }
      });
      console.log(score);
    });
  }
}

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

Answer 1

Так вы должны использовать форму в angular:

в компоненте. html:

<form class="quiz-form text-light" 
    #myForm="ngForm" (ngSubmit)="submitForm(myForm)">

     <div class="form-check my-2 text-white-50">
      <input type="text" name="q1" id="q1" [(ngModel)]="q1" />
    </div>
        .....
      <div class="text-center">
         <input type="submit" class="btn btn-light" />
     </div>
</form>

в component.ts:

submitForm(form:any) {
    console.log(form.value);
  }