Sprawdzanie, czy pola "select" w ankiecie zostały zaznaczone.

Question

Cześć :)

Mam za zadanie wykonać w Angularze projekt mini nakiety. Pytania są trzy, odpowiedzi są rozwijane z select-a.

Co do struktury projektu:

app.component.html

<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>

Najważniejsza jest część "main.component.html", bo tam de facto znajduje się ciało ankiety.

<main>
  <div id="container">
      <div class="stylise_all">
          <h1>VR TECH - Students Survey</h1>
          <p>Project No: 610281-EPP-1-2019-1-AL-EPPKA2-CBHE-JP</p>
          <p>*Wymagane</p>
      </div>
      <div class="stylise_all">
          <p>1. Which is your actual knowledge regarding virtual/digital technologies?</p>
          <select>
            <option *ngFor = "let i of first">{{i}}</option>
          </select>
          <br>
          <br>
          <br>
      </div>
      <div class="stylise_all">
          <p>2. During your precedent years of study, have you ever been introduced or trained on VR/AI technologies? *</p>
          <select>
            <option *ngFor = "let i of second">{{i}}</option>
          </select>
          <br>
          <br>
          <br>
      </div>
      <div class="stylise_all">
          <p>3. How often do you engage in digital learning activities? *</p>
          <select>
            <option *ngFor = "let i of third">{{i}}</option>
          </select>
          <br>
          <br>
          <br>
      </div>
      <input type="submit" id="sumbit_button" name="POTWIERDŹ">
  </div>
</main>

Ponadto ważny jest też plik main.component.ts, bo tam w klasie znajdują się  zmienne, które za pomocą *ng iterują w pętlach.

import { Component } from '@angular/core';


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


export class MainComponent {
  first = [" ","1 - Very Low","2","3","4","5 - Very High"]
  second = [" ","1 - Never","2","3","5 - On a daily basis"]
  third = [" ","1 - Never", "2", "3","4","5 - On a daily basis"]
}

Natomiast co do problemu... pozostały mi dwie rzeczy do zrobienia:

1)

" Na formularzu wstaw dynamiczny element tekstowy informujący o ilości ustawionych przez użytkownika pól SELECT (np. liczba pól do uzupełnienia: 3)"

2)

"wciśnięcie przycisku POTWIERDŹ ma wyświetlić ALERT z informacją czy na wszystkich polach SELECT dokonano wyboru."

Co do drugiego to miałem taki pomysł, żeby po wciśnięciu przycisku prześlij zrobić backdrop-a na całą stronę (albo jej większość), który także jak w pierwszy przypadku będzie informował o ilości pozostałych pól select i będzie się pytał, czy na pewno chce już opuścić ankietę.

Moja wiedza z javascript jest zerowa, a jeżeli chodzi o "typescript" (to te polecenia "*ng"?) też pozostawia wiele do życzenia, więc byłbym bardzo wdzięczny za wyjaśnienie poszczególnych skryptów. 

Comments

Może nie na temat, ale ... 

. . .
<h1>VR TECH - Students Survey</h1>
. . .
1. Which is your actual knowledge ...
. . .
2. During your precedent years of study, ...     etc.

 . . .
a tu 
<input type="submit" id="sumbit_button" name="POTWIERDŹ">

nawet, jeżeli już używamy w kodzie języka polskiego to bez "ogonków" name="POTWIERDŹ" -> name="potwierdz"