Angular 2中的表单输入验证（模板驱动）

我希望这些输入在提交时显示一条消息，如“Name is required”（因此，在内部有Name之前，submit按钮处于禁用状态）。有没有一种简单的方法可以用Angular 2模板驱动的表单来实现这一点？我想我应该在表单的HTML中提供一些属性，并将其连接到一个组件，但在遵循文档中的示例时无法理解它。谢谢你的帮助

<form class="">
    <div>
        <p>Name:</p>
        <input type="text">
    </div>
    <div class="link-input">
        <p>City:</p>
        <input type="text">
    </div>

    <button 
        (click)="submitForm()">
        Submit
    </button>
</form>

姓名：

城市：

提交

您的Html：

<form role="form" [formGroup]="inputForm" novalidate>
    <div>
        <p>Name:</p>
        <input
         formControlName="name"
         type="text">
    </div>
    <div class="link-input">
        <p>City:</p>
        <input
         formControlName="city"
         type="text">
    </div>

    <button 
        [disabled]="!inputForm.valid"
        (click)="submitForm()">
    </button>
</form>

---

这样可以确保表单已被触摸（输入已被更改），并且名称字段的长度至少为1个字母。你们可以为城市做类似的事情

组成部分：

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

export class InputComponent  {   
   public inputForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {

  this.inputForm = this.formBuilder.group({
  name:    new FormControl('', Validators.required),
  city:    new FormControl('', Validators.required),
   });
  }
//... codes..
}

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

export class InputComponent  {   
  public inputForm: FormGroup;
  constructor(private formBuilder: FormBuilder) {

    this.inputForm = this.formBuilder.group({
      name:    new FormControl('', Validators.required, Validators.minLength(1)]),
      city:    new FormControl('', Validators.required),
    });
  }
}

视图：

姓名：

名称是必需的
城市：

模板驱动表单
我也有这个问题，我找到了答案，我想和你们分享。
我创建了一个带有验证的登录表单，如下所示：

login.component.html
我希望这将帮助你，如果你需要任何帮助，你可以写信给我。我很乐意帮助你@Smithy我也在学习angular 2。
angular 2表单验证与我们在angular 1中所做的完全不同。
将表单标记写入DOM时，angular 2会向其中添加ngForm和ngControl。
可以使用angular2属性[disabled]禁用按钮。要使按钮保持禁用状态，您需要将验证属性应用于[disabled]。我给出了一个简单的示例，它将为您提供表单验证、输入字段验证和模式验证。
该按钮将被禁用，直到表单有效

在HTML中

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)">
  <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['usermail'].valid && signinForm.controls['usermail'].touched}">
      <label>Email Address</label>
      <input class="form-control" type="email" [formControl]="signinForm.controls['usermail']">
      <span *ngIf="signinForm.controls['usermail'].hasError('required') && signinForm.controls['usermail'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Email</span>
      <span *ngIf="signinForm.controls['usermail'].hasError('pattern') && signinForm.controls['usermail'].touched" class="required pull-right">*Invalid Email</span>
    </div>
    <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['userpass'].valid && signinForm.controls['userpass'].touched}">
       <label>Password</label>
       <input class="form-control" type="password" [formControl]="signinForm.controls['userpass']" (focus)="showErrorMessage=false">
        <span *ngIf="signinForm.controls['userpass'].hasError('required') && signinForm.controls['userpass'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Password</span>
    </div>
      <button type="submit" class="btn btn-pri mds_btn" [disabled]="!signinForm.valid">Login</button>       
</form>

在本例中，我使用FormBuilder的FormGroup指令。FormBuilder创建FormGroup的实例，我们称之为表单。我还订阅了表单，以便在输入字段中输入值时，表单将被订阅

我希望这将对您有所帮助：）
再次感谢我正在尝试，是否有办法只导入FormsModule？我只是没有足够的经验来实现所有这些Angular2的东西，所以我很难理解：/我会在这里发布完整的代码，但它相当长。我是否应该在整个新组件中添加代码（您在组件下发布的代码）？我有一个app.component，我可以从那里做吗？是的，当然，我发布的
InputComponent
不是必需的，只需将该代码放在与两个输入（城市和名称）的HTML文件相关的组件中即可。。别忘了导入上面的内容。。清楚吗？在您的回答中，在提交表单之前不会进行验证。您在单击注册链接时没有遇到任何问题。没有，链接只是重定向到注册表单。我有相同的表单，我猜您是从angular authentication教程复制的，但我想问它是否与后端login.component.ts代码有关，当我删除代码并将其更改为firebase身份验证时，它现在不起作用。
<div class="col-md-6 col-md-offset-3">
    <h2>Login</h2>
    <form name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !username.valid }">
            <label for="username">Username</label>
            <input type="text" class="form-control" name="username" [(ngModel)]="model.username" #username="ngModel" required />
            <div *ngIf="f.submitted && !username.valid" class="help-block">Username is required</div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
            <label for="password">Password</label>
            <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
            <div *ngIf="f.submitted && !password.valid" class="help-block">Password is required</div>
        </div>
        <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary">Login</button>
            <img *ngIf="loading" src="loading.gif" />
            <a [routerLink]="['/register']" class="btn btn-link">Register</a>
        </div>
    </form>
</div>

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import { AlertService, AuthenticationService } from '../services';

@Component({
    templateUrl: './login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    returnUrl: string;

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService) { }

    ngOnInit() {}

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(
                data => {
                    this.router.navigate([this.returnUrl]);
                },
                error => {
                    this.alertService.error(error);
                    this.loading = false;
                });
    }
}

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)">
  <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['usermail'].valid && signinForm.controls['usermail'].touched}">
      <label>Email Address</label>
      <input class="form-control" type="email" [formControl]="signinForm.controls['usermail']">
      <span *ngIf="signinForm.controls['usermail'].hasError('required') && signinForm.controls['usermail'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Email</span>
      <span *ngIf="signinForm.controls['usermail'].hasError('pattern') && signinForm.controls['usermail'].touched" class="required pull-right">*Invalid Email</span>
    </div>
    <div class="form-group" [ngClass]="{'has-error':!signinForm.controls['userpass'].valid && signinForm.controls['userpass'].touched}">
       <label>Password</label>
       <input class="form-control" type="password" [formControl]="signinForm.controls['userpass']" (focus)="showErrorMessage=false">
        <span *ngIf="signinForm.controls['userpass'].hasError('required') && signinForm.controls['userpass'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Password</span>
    </div>
      <button type="submit" class="btn btn-pri mds_btn" [disabled]="!signinForm.valid">Login</button>       
</form>

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: [ './login.component.scss' ]
})
export class LoginComponent {
   myForm: FormGroup;

   emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
    passRegex:any ='^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$'; 

   constructor(fb: FormBuilder) {

      this.myForm = fb.group({
         'logmail': [ null, Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) ],
         'logpass': [ null, Validators.compose([ Validators.required, Validators.pattern(this.passRegex) ]) ]
      });

    this.myForm.valueChanges.subscribe((form: any) => {
   });
  }

  submitForm(lgvalue: any) {
       //do logic here after submitting the form

  }
}