угловой 6: - Реактивная проверка формы не работает должным образом

Question

потребность в проверке угловой 6 реактивной формы, которую я изучил на официальном веб-сайте угловой

Я хочу проверить свою форму и отобразить другое сообщение об ошибке с другой ошибкой

Код компонента

this.pinForm = new FormGroup({
      'defaultPin': new FormControl(this.pin.oldPin, [
        Validators.required,
        Validators.minLength(4)
      ])
    });

HTML-код

<form [formGroup]="pinForm" #formDir="ngForm">

        <div class="form-group">
          <label for="defaultPin">Default Pin</label>
          {{formDir.valid}}
          <input type="text" name="defaultPin" class="form-control" id ="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
          formControlName = "defaultPin" />
          <small id="defaultPin" class="form-text text-muted">Check your Email address for default pin.</small>
          {{defaultPin}}

          <div *ngIf="defaultPin.invalid && (defaultPin.dirty || defaultPin.touched)"
              class="alert alert-danger">
    enter code here
            <div *ngIf="defaultPin.errors.required">
              Name is required.
            </div>
            <div *ngIf="defaultPin.errors.minlength">
              Name must be at least 4 characters long.
            </div>

          </div>
        </div>

Но когда я бегу, я получаю эту ошибку

ERROR TypeError: Cannot read property 'invalid' of undefined
at Object.eval [as updateDirectives] (AddPinComponent.html:21)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:10756)
at checkAndUpdateView (core.js:10153)
at callViewAction (core.js:10394)
at execComponentViewsAction (core.js:10336)
at checkAndUpdateView (core.js:10159)
at callViewAction (core.js:10394)
at execEmbeddedViewsAction (core.js:10357)
at checkAndUpdateView (core.js:10154)
at callViewAction (core.js:10394)

Пожалуйста, помогите мне

Answer 1

Вы используете reactive form и Template-driven вместе.

Использовать только Reactive form. Делайте изменения в ваших файлах. (изменить согласно вашему требованию).

Component.Html

<form [formGroup]="pinForm">
    <div class="form-group">
        <label for="defaultPin">Default Pin</label>
        <input type="text" name="defaultPin" class="form-control" id="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
         formControlName="defaultPin" />
        <span class="text-danger" *ngIf="pinForm.controls['defaultPin'].hasError('required') && (pinForm.controls['defaultPin'].dirty || pinForm.controls['defaultPin'].touched)">This field is required</span>
    </div>
</form>

Component.ts

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

export class AppComponent {

pinForm: FormGroup;

constructor(fb: FormBuilder) {
    this.pinForm = fb.group({
      'defaultPin': [null, Validators.required],
    });
  }
}

module.ts

// Import ReactiveFormModule in your module.ts file

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

@NgModule({
imports: [ FormsModule, ReactiveFormsModule ],

Если проблема не устранена, см. Stackblitz

Answer 2

Вам необходимо указать ваш pinForm, чтобы получить его контроллер:

*ngIf="!pinForm.controls.defaultPin.valid && (pinForm.controls.defaultPin.dirty || pinForm.controls.defaultPin.touched)"

Итак, вот как должна выглядеть ваша форма:

<form [formGroup]="pinForm" #formDir="ngForm">

    <div class="form-group">
      <label for="defaultPin">Default Pin</label>
      {{formDir.valid}}
      <input type="text" name="defaultPin" class="form-control" id ="defaultPin" aria-describedby="defaultPin" placeholder="Please enter your old Pin"
      formControlName = "defaultPin" />
      <small id="defaultPin" class="form-text text-muted">Check your Email address for default pin.</small>
      {{defaultPin}}

      <div *ngIf="!pinForm.controls.defaultPin.valid && (pinForm.controls.defaultPin.dirty || pinForm.controls.defaultPin.touched)")"
          class="alert alert-danger">
enter code here
        <div *ngIf="pinForm.controls.defaultPin.errors.required">
          Name is required.
        </div>
        <div *ngIf="pinForm.controls.defaultPin.errors.minlength">
          Name must be at least 4 characters long.
        </div>

      </div>
    </div>

Кроме того, вы должны запустить formGroup в ваших компонентах ngOnInit():

Answer 3

Когда вы пишете formControlName = "defaultPin", вы предоставляете имя для FormControl, но для доступа к таким свойствам, как invalid, errors и т. Д., Вам необходимо FormControl экземпляр из FormGroup, например:

pinForm.get('defaultPin')

Так что просто добавьте следующий геттер к вашему компоненту:

get defaultPin() {
  return this.pinForm.get('defaultPin')
}