используя ngModel, но не может заставить Обязательный валидатор работать правильно

Question

Я не могу заставить проверку Required ngModel работать должным образом и показать внешнему пользователю, что он ничего не ввел в форму. Я использую Bootstrap для фреймворка с angular / typcript. чего мне не хватает Я добавил формы в корень приложения и добавил NgModel к этому компоненту. Я также могу получить форму для отправки, но я не могу понять, что здесь происходит не так.

<div class="container">
  <div class="row">
    <div class="col-6">
      <h4>Edit Booking</h4>
    </div>
    <span class="col-6">
      <!-- <button
      class="btn btn-primary float-right"
      (click)="onEditBooking()">
        Edit
      </button> -->
    </span>
  </div>

  <hr>

  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <form (submit)="onAddBooking(bookingForm)" #bookingForm="ngForm">

            <div class="row">

              <!-- Offer Date -->
              <div class="form-group col-sm-12 col-lg-4">
                <input
                class="form-control"
                type="date"
                value=""
                name="bookingDate"
                ngModel
                required>
                <small><label>Offer Date</label></small>
              </div>

              <!-- Agent -->
              <div class="form-group col-sm-12 col-lg-4">
                  <select
                  class="form-control"
                  name="agent"
                  ngModel
                  required>
                    <option></option>
                    <option>Nicole St. John</option>
                    <option>Susie Krueger</option>
                  </select>
                    <small><label>Agent</label></small>
              </div>

              <!-- Department -->
              <div class="form-group col-sm-12 col-lg-4">
                <select
                  class="form-control"
                  name="department"
                  ngModel
                  required>
                    <option></option>
                    <option>Commercial</option>
                    <option>Digital</option>
                    <option>Film</option>
                    <option>Talent</option>
                    <option>Television</option>
                    <option>Personal Appearance</option>
                </select>
                  <small><label>Department</label></small>
              </div>

            </div>

              <p>Details</p>
              <!-- Client Name -->
              <div class="form-group">
                <input
                type="text"
                class="form-control"
                name="clientName"
                ngModel
                required>
                <small><label>Client Name</label></small>
              </div>

              <!-- <p>Project</p> -->
              <!-- Project -->
              <div class="form-group">
                <input
                type="text"
                class="form-control"
                name="title"
                ngModel
                required>
                <small><label>Project Title</label></small>
              </div>

              <!-- Service -->
              <div class="form-group">
                <!-- <label for="department">Client Details</label> -->
                <select
                class="form-control"
                name="service"
                ngModel
                required>
                  <option></option>
                  <option>Comedian</option>
                  <option>Director</option>
                  <option>Host</option>
                  <option>Talent</option>
                  <option>Producer</option>
                  <option>Writer</option>
                </select>
                <small><label>Select Service</label></small>
              </div>

              <hr>

              <p>Offer Details</p>
            <div class="row">

              <!-- Rate -->
              <div class="form-group col-sm-12 col-lg-8">
                <input
                type="text"
                class="form-control"
                name="rate"
                ngModel
                required>
                  <small><label>Rate</label></small>
              </div>

              <div class="form-group col-sm-12 col-lg-4">
                <input
                type="text"
                class="form-control"
                name="perDiem"
                ngModel>
                  <small><label>Per Diem</label></small>
              </div>

            </div>

            <div class="row">
              <!-- Start Date -->
              <div class="form-group col-sm-12 col-lg-3">
                  <input
                  class="form-control"
                  type="date"
                  value=""
                  name="startDate"
                  ngModel>
                  <small><label>Start Date</label></small>
                </div>

              <!-- End Date -->
              <div class="form-group col-sm-12 col-lg-3">
                  <input
                  class="form-control"
                  type="date"
                  value=""
                  name="endDate"
                  ngModel>
                  <small><label>End Date</label></small>
                </div>

                <!-- Number of Episodes -->
              <div class="form-group col-sm-12 col-lg-3">
                  <input
                  class="form-control"
                  type="number"
                  name="episodes"
                  value=""
                  ngModel>
                  <small><label>Number of Episodes</label></small>
                </div>

              <!-- Number of Days -->
              <div class="form-group col-sm-12 col-lg-3">
                  <input
                  class="form-control"
                  type="number"
                  value=""
                  name="days"
                  ngModel>
                  <small><label>Number of Days</label></small>
                </div>
            </div>

            <!-- Credit -->
            <div class="form-group">
              <input
              type="text"
              class="form-control"
              name="credit"
              ngModel>
              <small><label>Credit</label></small>
            </div>

            <div class="row">
              <!-- Location -->
              <div class="form-group col-sm-12 col-lg-6">
                <input
                type="text"
                class="form-control"
                name="location"
                ngModel>
                <small><label>Location</label></small>
              </div>

              <!-- Travel -->
              <div class="form-group col-sm-12 col-lg-6">
                <input
                type="text"
                class="form-control"
                name="travel"
                ngModel>
                <small><label>Travel</label></small>
              </div>
            </div>

            <!-- Dressing Room -->
                <div class="form-group">
                  <input
                  type="text"
                  class="form-control"
                  name="dressingRoom"
                  ngModel>
                  <small><label>Dressing Room</label></small>
                </div>

            <!-- Lodging -->
                <div class="form-group">
                  <input
                  type="text"
                  class="form-control"
                  name="lodging"
                  ngModel>
                  <small><label>Lodging</label></small>
                </div>

            <!-- exclusivity -->
                <div class="form-group">
                  <input
                  type="text"
                  class="form-control"
                  name="exclusivity"
                  ngModel>
                  <small><label>Exclusivity</label></small>
                </div>

            <!-- bumps -->
                <div class="form-group">
                  <input
                  type="text"
                  class="form-control"
                  name="bumps"
                  ngModel>
                  <small><label>Bumps</label></small>
                </div>

            <!-- Options -->
                <div class="form-group">
                  <textarea
                  class="form-control"
                  rows="1"
                  name="options"
                  ngModel></textarea>
                  <small><label>Options</label></small>
                </div>

                <hr>

            <p>Buyer Details</p>
            <!-- Offer from -->
                <div class="row">
                  <div class="form-group col-sm-12 col-lg-6">
                    <input
                    type="text"
                    class="form-control"
                    name="buyer"
                    ngModel>
                    <small><label>Offer From</label></small>
                  </div>

            <!-- Buyer position -->
                  <div class="form-group col-sm-12 col-lg-6">
                      <select
                      class="form-control"
                      name="buyerType"
                      ngModel>
                        <option></option>
                        <option>Casting</option>
                        <option>Development Executive</option>
                        <option>Director</option>
                        <option>Producer</option>
                      </select>
                      <small><label>Buyer Type</label></small>
                  </div>
            <!-- Production Company -->
                  <div class="form-group col-sm-12 col-lg-6">
                      <input
                      type="text"
                      class="form-control"
                      name="productionCompany"
                      ngModel>
                      <small><label>Production Company</label></small>
                    </div>

            <!-- Network -->
                  <div class="form-group col-sm-12 col-lg-6">
                    <input
                    type="text"
                    class="form-control"
                    name="newtwork"
                    ngModel>
                    <small><label>Network</label></small>
                  </div>

            <!-- Accounting Name -->
                  <div class="form-group col-sm-12 col-lg-6">
                    <input
                    type="text"
                    class="form-control"
                    name="accountingName"
                    ngModel>
                    <small><label>Accounting Name</label></small>
                  </div>

            <!-- Accounting Email -->
                  <div class="form-group col-sm-12 col-lg-6">
                    <input
                    type="email"
                    class="form-control"
                    name="accountingEmail"
                    ngModel>
                    <small><label>Accounting Email for Check Autho</label></small>
                  </div>
          </div>
              <hr>


            <!-- Booking Notes -->
            <p>Notes</p>
                  <div class="form-group">
                    <!-- <label for="bookingNotes">Notes</label> -->
                    <textarea
                    class="form-control"
                    rows="2"
                    name="notes"
                    ngModel></textarea>
                  </div>

                  <hr>

                  <div class="btn-toolbar float-right">
                      <button
                      class="btn btn-primary"
                      type="submit">Submit</button>
                  </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

TS файл:

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

import { BookingService } from '../booking.service';

@Component({
  selector: 'app-create-booking',
  templateUrl: './create-booking.component.html',
  styleUrls: ['./create-booking.component.css']
})
export class CreateBookingComponent implements OnInit {
  enteredBookingDate = '';
  enteredAgent = '';
  enteredDepartment = '';
  enteredClientName = '';
  enteredProjectTitle = '';
  enteredClientService = '';
  enteredRate = '';
  enteredPerDiem = '';
  enteredStartDate = '';
  enteredEndDate = '';
  enteredNumberOfEpisodes = '';
  enteredNumberOfDays = '';
  enteredCredit = '';
  enteredLocation = '';
  enteredTravel = '';
  enteredDressingRoom = '';
  enteredLodging = '';
  enteredExclusivity = '';
  enteredBumps = '';
  enteredOptions = '';
  enteredBuyer = '';
  enteredBuyerType = '';
  enteredProductionCompany = '';
  enteredNetwork = '';
  enteredAccountingName = '';
  enteredAccountingEmail = '';
  enteredNotes = '';

  constructor (public bookingsService: BookingService) {}

  onAddBooking(form: NgForm) {
    this.bookingsService.addBookings(
      form.value.bookingDate,
      form.value.agent,
      form.value.department,
      form.value.clientName,
      form.value.title,
      form.value.service,
      form.value.rate,
      form.value.perDiem,
      form.value.startDate,
      form.value.endDate,
      form.value.episodes,
      form.value.days,
      form.value.credit,
      form.value.location,
      form.value.travel,
      form.value.dressingRoom,
      form.value.lodging,
      form.value.exclusivity,
      form.value.bumps,
      form.value.options,
      form.value.buyer,
      form.value.buyerType,
      form.value.productionCompany,
      form.value.network,
      form.value.accountingName,
      form.value.accountingEmail,
      form.value.notes
    );
  }

  onEditBooking () {
  }

  ngOnInit() {
  }

}

Answer 1

Я думаю, вам нужно что-то вроде этих атрибутов:

 <input type="text" class="form-control" id="clientName"
               required
               [(ngModel)]="model.clientName" name="clientName"
               #clientName="ngModel">

Оформить заказ StackBlitz: https://stackblitz.com/edit/angular-hero-form-example?file=src/app/hero-form/hero-form.component.html