角2表單驗證無法使用哈希表單元素

Question

我有一個使用angular 2的表單驗證。[僅適用於Angular 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");
    }
  }
}

上面的腳本不起作用..我在哪里弄錯了？

Answer 1

您的模板有問題。 代替使用#registrationForm="ngForm"使用[formGroup]="ngForm"

您使用的是反應式表單方法，在這種情況下，要在模板上映射表單，在Component上映射表單，請在模板的form標記上使用[formGroup] 。

#registrationForm="ngForm"通常用於構建表單的模板驅動器策略中。 然后，在(submit)您還將表單傳遞給在這種情況下並不需要的方法。

另外，您應該使用(submit)而不是(ngSubmit)

嘗試這個：

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

這是供您參考的示例StackBlitz 。

Answer 2

您要驗證什么？ 只有一個輸入字段，如果要驗證，請嘗試在輸入字段上放置“ required”屬性或條件以進行驗證。 另外，如果您需要看一下簡單的表單驗證示例，請檢查以下存儲庫： https : //github.com/alokstar/Angular4FormValidation

希望能幫助到你！