# Angular 2 中的表单验证与提交
在Angular 2中，表单是一个重要的组件，而表单的验证和提交则是开发过程中不可忽视的关键部分之一。本文将介绍如何从外部进行表单验证并提交，同时提供一些简单而实用的案例代码。## 表单验证的基础在Angular中，表单验证是通过FormControl、FormGroup和Validators等类实现的。我们可以通过这些类轻松地创建和管理表单控件，并定义验证规则。在外部验证表单时，我们可以通过对表单控件的值进行手动验证来确保输入的合法性。让我们通过一个简单的案例来说明如何在Angular中进行表单验证：typescriptimport { Component } from '@angular/core';import { FormControl, FormGroup, Validators } from '@angular/forms';@Component({ selector: 'app-my-form', template: ` `,})export class MyFormComponent { myForm = new FormGroup({ name: new FormControl('', Validators.required), }); get nameControl() { return this.myForm.get('name'); } submitForm() { // 处理表单提交逻辑 }}在这个例子中，我们创建了一个简单的表单，其中包含一个姓名输入框，并且使用`Validators.required`规则来确保姓名的输入不为空。通过使用`nameControl`来获取姓名控件，我们可以在模板中轻松地显示验证错误信息。## 从外部验证并提交表单有时候，我们可能需要在某些条件下手动触发表单验证，而不是等待用户与表单交互。这时，我们可以通过在组件中调用`updateValueAndValidity`方法来手动触发表单验证。让我们看一个例子，假设我们在组件中有一个按钮，点击按钮时需要验证并提交表单：typescriptimport { Component } from '@angular/core';import { FormControl, FormGroup, Validators } from '@angular/forms';@Component({ selector: 'app-my-form', template: ` `,})export class MyFormComponent { myForm = new FormGroup({ name: new FormControl('', Validators.required), }); get nameControl() { return this.myForm.get('name'); } submitForm() { // 处理表单提交逻辑 } validateAndSubmit() { this.myForm.updateValueAndValidity(); if (this.myForm.valid) { this.submitForm(); } }}在这个例子中，我们添加了一个按钮，并在按钮的点击事件中调用了`validateAndSubmit`方法。在这个方法中，我们使用`updateValueAndValidity`手动触发表单验证，然后检查表单是否通过验证，如果通过则调用`submitForm`方法提交表单。## 通过以上的例子，我们了解了如何在Angular 2中进行表单验证以及如何从外部触发表单验证并提交。这是一个在实际应用中经常会遇到的场景，通过灵活运用Angular提供的表单控件和方法，我们可以更好地处理用户输入和提高用户体验。希望本文能够帮助你更好地理解Angular中的表单验证和提交。