Как показать сообщения проверки формы при использовании [(ngModel)] в Angular 2?

Question

Я борюсь за сообщение об ошибке проверки.

У меня есть форма, и я использовал ngModel.Теперь я не могу отображать сообщения об ошибках в зависимости от шаблона.Я написал подтверждение в component.ts.

Может ли кто-нибудь помочь мне с двумя типами сообщений: 1. Обязательно. 2. Сообщение проверки для формы, которая недопустима в отношении шаблона (Проверка с использованием шаблона).

Я обыскал все вышеперечисленные места без посторонней помощи, и я буду признателен, если кто-нибудь сможет мне помочь с этим.

Component.html

<div class="card card-blur">
  <div class="card-header">
    <p>ACCOUNT INFORMATION</p>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-3">
        <!-- <p>Profile Image</p>
          <img src={{client.ProfileImage}} type="text" name="ProfilePic" style="width:60%"> -->
        <ba-picture-uploader [picture]="client.ProfileImage" [defaultPicture]="defaultPicture" [uploaderOptions]="uploaderOptions"></ba-picture-uploader>
      </div>
      <div class="col-md-9">
        <ul style="margin-top:20px;">
          <ul style="margin-top:20px;">
            <!-- <li>Take picture of id from your phone or mobile camera</li> -->
          </ul>
        </ul>

      </div>
    </div>
    <form #f="ngForm" (submit)="submit()">
      <fieldset>

        <div class="row form-inline">
          <div class="col-md-6">
            <div class="col-md-3"></div>
            <div class="col-md-9"></div>
          </div>
          <div class="col-md-6">
            <!-- <div class="form-group" style="margin-left: 16em; margin-top: -5em"> -->
            <div class="form-group" style=" margin-top: -3.5em">
              <div class="col-md-3">
                <label for="organization">Organization</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.Organization" type="text" name="Organization" class="form-control" id="organization"
                  placeholder="Organization">
              </div>
            </div>
          </div>
        </div>

        <div class="row form-inline">
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="fname">First Name</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ClientFirstName" type="text" name="FirstName" class="form-control" id="fname"
                  placeholder="First Name">
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="lname">Last Name</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ClientLastName" type="text" name="lastN" class="form-control" id="lname"
                  placeholder="Last Name">
              </div>
            </div>
          </div>
        </div>
        <br />
        <div class="row form-inline">
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="email">Email </label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ContactEmailID" name="Email" type="email" class="form-control" id="email"
                  placeholder="Enter email">
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="form-group">
              <div class="col-md-3">
                <label for="pnumber">Phone Number</label>
              </div>
              <div class="col-md-9">
                <input [(ngModel)]="client.ContactMobileNo" name="PhoneNumber" type="text" class="form-control"
                  (keypress)="onlyNumberKey($event)" id="pnumber" placeholder="Phone Number" minlength="10" maxlength="10">
              </div>
            </div>
          </div>
        </div>
        <br />
      </fieldset>
      <button type="submit" class="btn btn-primary btn-sm" style="width:5em">Update</button>
    </form>

  </div>
  <!-- {{f.value | json}} -->
</div>

Component.ts, куда я импортировал валидаторы

this.form = fb.group({
  FirstName: [ "", Validators.compose([Validators.pattern(alphabetRegex), Validators.required])],
  LastName: ["", ([Validators.pattern(alphabetRegex), Validators.required])],
  Email: ["", Validators.compose([Validators.pattern(regexEmail), Validators.required])],
  PhoneNumber: ["", Validators.compose([Validators.required])],
});

Answer 1

Если вы хотите увидеть рабочую модель проверки формы на основе простого шаблона с угловой, вы можете взглянуть на следующее: https://github.com/alokstar/Angular4FormValidation

Она показывает простые сообщения об ошибках на лету, используя данные-переплет в угловой.Надеюсь, это поможет!

Answer 2

Существует два типа форм в угловых, шаблонно-управляемых и реактивных формах.Кажется, ты их смешиваешь.[(ngModel)] принадлежит шаблонно-управляемым формам, а FormBuilder относится к реактивным формам.Чтобы узнать о валидации в обоих типах, см. https://angular.io/guide/form-validation

. Если вы хотите использовать реактивные формы, узнайте больше здесь https://angular.io/guide/reactive-forms

. Я рекомендую выбрать один и придерживаться его в данном проекте..

Если проверка важна для вас, реактивные формы, вероятно, являются лучшим выбором, поскольку они обеспечивают мощную и гибкую проверку.

Answer 3

Прежде чем ответить на ваш вопрос, я хотел бы сделать предложение.В вашем коде вы смешали понятия форм, управляемых реактивными данными / моделями (Component.ts), и шаблонных форм (Component.html).

1. Если вы хотите следовать шаблонно-управляемой формеПожалуйста, используйте:

   <input type="text" id="fName" class="form-control" required pattern="[A-Z]{5}" [(ngModel)]="FirstName" name="FirstName" #fName="ngModel" />

   <div [hidden]="!fName.errors.required">FirstNameis required!</div>

   <div [hidden]="!fName.errors.pattern">FirstName must be at least 5 characters long</div>

В этом случае вам не нужно иметьобъект конструктора форм в файле .ts.

Если вы используете реактивные формы

<input type="text" class="form-control" formControlName="FirstName" id="FirstName" placeholder="Enter First Name"/>

<div *ngIf="form.controls.FirstName.errors.required">Field is required.</div>

<div *ngIf="form.controls.FirstName.errors.pattern">Can contain only alphabets and at least three characters required</div>

Answer 4

Используйте FormControl и Validators из @angular/forms для проверки полей формы, как показано ниже.

this.form = new FormGroup({
      FirstName : new FormControl( '', [ Validators.required, Validators.pattern(alphabetRegex) ]),
      LastName : new FormControl( '', [ Validators.required, Validators.pattern(alphabetRegex) ]),
      Email : new FormControl( '', [ Validators.required, Validators.pattern(regexEmail) ]),
      PhoneNumber : new FormControl( '', [ Validators.required ]),
  });

Не забудьте добавить импорт FormControl, FormGroup и Validator в свой компонент какниже.

import { FormControl, FormGroup, Validators } from '@angular/forms';

Вы можете показать проверку в HTML , как показано ниже.

<form #f="ngForm" (submit)="submit()" [formGroup]="myform">       
    <div class="row form-inline">
        <div class="col-md-6">
            <div class="form-group">

                  <div class="col-md-3">
                    <label for="fname">First Name</label>
                  </div>

                  <div class="col-md-9">
                    <input [(ngModel)]="client.ClientFirstName" type="text" name="FirstName" class="form-control" id="fname"
                      placeholder="First Name">
                  </div>

                  <div>
                      <span *ngIf="(
                      myform.get('FirstName').hasError('required') &&
                      myform.get('FirstName').touched)">Please enter first name</span>

                      <span class="error-message" *ngIf="(
                      myform.get('FirstName').hasError('pattern') &&
                      myform.get('FirstName').touched)">Enter valid first name </span>
                  </div>

            </div>
         </div>
    </div>
</form>

Надеюсь, это поможет вам.

Answer 5

Добавьте [formGroup] в <form> элемент и formControlName, чтобы сформировать элемент.

Посмотрите на демонстрационный пример - https://stackblitz.com/edit/angular-yeyiuk