Angular bootstrap функция нажатия кнопки

Question

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

<section class="contact-area pb-80" style="margin-top:10%">
    <div class="container">
        <div class="section-title">
            <h2>Your Information</h2>
            <div class="bar"></div>
            <p>Please provide the correct information we will contact you with your information.</p>
        </div>

        <div class="row h-100 justify-content-center align-items-center">
            <div class="col-lg-6 col-md-12">
                <img src="assets/img/1.png" alt="image">
            </div>

            <div class="col-lg-6 col-md-12">
                <form id="contactForm">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="form-group">
                                <input type="text" name="name" id="name" class="form-control" required placeholder="Enter your name">
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-12">
                            <div class="form-group">
                                <input type="email" name="email" id="email" class="form-control" required placeholder="Enter your email">
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-6">
                            <div class="form-group">
                                <input type="text" name="phone_number" id="phone_number" required class="form-control" placeholder="Enter your number (Whats app)">
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-6">
                            <div class="form-group">
                                <input type="text" name="msg_subject" id="msg_subject" class="form-control" required placeholder="Enter your skype name">
                            </div>
                        </div>


                        <div class="col-lg-12 col-md-12">
                            <button type="submit" class="btn btn-primary">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

Это мой код, мне нужно просто проверить, когда пользователь нажимает Send Message Но после того, как все поля заполнены, как в форме. Проверка работает нормально, но проблема в том, как я могу проверить кнопку?

Я создал простую функцию, подобную этой

submit(){
  console.log('submit');
}

I, если добавить (click)="submit()" на кнопку, чтобы каждый раз, когда пользователь нажимал, вызывал функцию. Я хочу, когда все поля заполнены, тогда эта функция может работать.

Answer 1

Важно: import { FormsModule } from '@angular/forms'; в свой модуль приложения и добавить его в массив импорта.

@NgModule({
  imports: [FormsModule],
})

Создайте переменную шаблона в элементе формы, например myForm, указанном ниже, а в теге кнопки используйте привязку свойства [disabled]="!myForm.form.valid". Кнопка «Отправить» будет работать только при заполнении каждого элемента формы.

Файл шаблона:

<code>    <form #myForm="ngForm" method="POST" (ngSubmit)="submitForm(myForm)">
  <div>
    <label>Name</label>        
    <input name="name" type="text" required ngModel/>
  </div>
  <div>
    <label>Email</label>
    <input name="email" type="email" required ngModel/>
  </div>
  <div>
    <label>Phone no</label>
    <input name="phone" type="number" required ngModel/>
  </div>

  <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
  <pre>{{myForm.value | json}}

Мой фрагмент кода можно найти на StackBlitz

Answer 2

Внутренний шаблон:

<form #myForm="ngForm">
  <input ngModel name="name" type="text" required />
  <input ngModel name="email" type="email" required />
  <input ngModel name="phone-number" type="text" required />

  <button (click)="onSubmit(myForm)">Submit</button>
</form>

Innner .ts:

onSubmit(form: NgForm) {
  console.log(form.invalid);
}

Убедитесь, что вы импортировали FormsModule в свой модуль:

import { FormsModule } from '@angular/forms';

@NgModule({
  // ...
  imports: [..., FormsModule, ...],
  // ...
})