угловая проверка формы 2 не работает с использованием элемента формы хэш - PullRequest
Новая
       32

угловая проверка формы 2 не работает с использованием элемента формы хэш

0 голосов
/ 12 октября 2018

У меня есть одна проверка формы с использованием углового 2. [Только угловой 2] Как запустить проверку части с использованием нижеприведенного пути?

app.component.html: 

<form   #registrationForm="ngForm"  (ngSubmit)="submitform()">
  <input type="text" class="form-control" name="name" formControlName="name" />
</form>

app.component.ts: 

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder,FormGroup,Validators } from '@angular/forms';

export class AppComponent implements OnInit {
  ngForm: FormGroup;
  ngOnInit() {
    this.ngForm = this._fb.group({
      name: ['Select', Validators.required]
    });
  }
  submitform() {
    this.formSubmitted = true;
    if (!this.ngForm.valid) {
      alert("Form Not valid");
    } else {
      alert("Valid");
    }
  }
}

Над скриптом не работает .. Где я ошибся?

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

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

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

0 голосов
/ 12 октября 2018

Есть проблема с вашим шаблоном.Вместо использования #registrationForm="ngForm" используйте [formGroup]="ngForm"

Вы используете подход «Реактивная форма», и в этом случае для сопоставления формы с шаблоном с формой в компоненте вы используете [formGroup] наform тег в вашем шаблоне.

#registrationForm="ngForm" обычно используется в стратегии создания шаблонов Drive Drive.Затем на (submit) вы также передаете форму методу, который на самом деле не требуется в этом случае.

Кроме того, вы должны использовать (submit) вместо (ngSubmit)

Попробуйтеэто: 

<form [formGroup]="ngForm" (submit)="submitform()">
  <input type="text" class="form-control" name="name" formControlName="name" />
  <button>Submit</button>
</form>

Вот Образец StackBlitz для вашей ссылки.

...