开发学院

您的位置：首页>教程>正文

教程正文

Angular7：表单

  在这一章中，我们将看到在Angular7中如何使用表单。我们将讨论使用表单的两种方式：

  •   模板驱动表单

  •   模型驱动表单

模板驱动表单

  使用模板驱动的表单，大部分工作都是在模板中完成的。使用模型驱动的表单，大部分工作是在组件类中完成的。

  现在让我们考虑使用模板驱动的表单。我们将创建一个简单的登录表单，并在表单中添加email id、password和提交按钮。首先，我们需要从@angular/forms导入到FormsModule，这在app.module.ts中完成，如下所示

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop'; 
import { FormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      FormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

  因此，在app.module.ts中，我们已经导入了FormsModule，并且它被添加到imports数组中，如代码所示。

  现在让我们在app.component.html文件中创建我们的表单。

<form #userlogin = "ngForm" (ngSubmit) = "onClickSubmit(userlogin.value)"> 
   <input type = "text" name = "emailid" placeholder = "emailid" ngModel> 
   <br/> 
   <input type = "password" name = "passwd" placeholder = "passwd" ngModel> 
   <br/> 
   <input type = "submit" value = "submit"> 
</form>

  我们已经创建了一个简单的表单，带有输入标签，包括email id、password和提交按钮。我们已经为它分配了type、name和placeholder。

  在模板驱动的表单中，我们需要通过添加ngModel指令和name属性来创建模型表单控件。因此，只要我们希望Angular从表单中访问我们的数据，就可以向标签添加一个模型，如上所示。现在，如果我们必须读取emailid和passwd，我们需要在它上面添加ngModel。

  如果您看到了，我们还将ngForm添加到#userlogin中。ngForm指令需要添加到我们创建的表单模板中。我们还在ClickSubmit上添加了函数，并为其分配了userlogin.value。

  现在让我们在app.component.ts中创建函数，并获取表单中输入的值。

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css']
})
export class AppComponent { 
   title = 'Angular 7 Project!'; 
   constructor(private myservice: MyserviceService) { } 
   ngOnInit() { } 
   onClickSubmit(data) {
      alert("Entered Email id : " + data.emailid); 
   }
}

  在上面的app.component.ts文件中，我们已经定义了onClickSubmit函数。当您点击表单提交按钮时，控件将调用上述功能。

  登录表单的css添加在app.component.css中

input[type = text], input[type = password] { 
   width: 40%; 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
} 
input[type = submit] { 
   padding: 12px 20px; 
   margin: 8px 0; 
   display: inline-block; 
   border: 1px solid #B3A9A9; 
   box-sizing: border-box; 
}

  浏览器输出如下：

emailid.jpg

  表单如下所示。让我们在其中输入数据，在提交功能中，email id会被警告，如下所示

form_looks.jpg

模型驱动表单

  在模型驱动的表单中，我们需要从@angular/forms导入反应表单模块，并在导入数组中使用它。

  app.module.ts中有一个更改。

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from './new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive'; 
import { SqrtPipe } from './app.sqrt'; 
import { MyserviceService } from './myservice.service'; 
import { HttpClientModule } from '@angular/common/http'; 
import { ScrollDispatchModule } from '@angular/cdk/scrolling'; 
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({ 
   declarations: [ 
      SqrtPipe, 
      AppComponent, 
      NewCmpComponent, 
      ChangeTextDirective, 
      RoutingComponent 
   ],
   imports: [ 
      BrowserModule, 
      AppRoutingModule, 
      HttpClientModule, 
      ScrollDispatchModule, 
      DragDropModule, 
      ReactiveFormsModule 
   ], 
   providers: [MyserviceService], 
   bootstrap: [AppComponent] 
}) 
export class AppModule { }

  在app.component.ts中，我们需要为模型驱动的表单导入一些模块。例如，从'@angular/forms'导入{ FormGroup, FormControl } 。

import { Component } from '@angular/core'; 
import { MyserviceService } from './myservice.service'; 
import { FormGroup, FormControl } from '@angular/forms';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent {
   title = 'Angular 7 Project!'; 
   emailid; 
   formdata;
   constructor(private myservice: MyserviceService) { }  
   ngOnInit() { 
      this.formdata = new FormGroup({ 
         emailid: new FormControl("angular@gmail.com"),
         passwd: new FormControl("abcd1234") 
      }); 
   } 
   onClickSubmit(data) {this.emailid = data.emailid;}
}

  变量表单数据在类的开始进行初始化，同样的数据也用如上所示的表单组初始化。变量emailid和passwd用要在表单中显示的默认值进行初始化。如果你愿意，你可以把它留空。

  这就是这些值在表单用户界面中的显示方式。

form_group.jpg

  我们已经使用表单数据来初始化表单值；我们需要在用户界面app.component.html中使用同样的方法。

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)" > 
      <input type = "text" class = "fortextbox" name = "emailid" placeholder = "emailid" 
         formControlName = "emailid"> 
      <br/> 
      
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd"> 
      <br/>
      
      <input type = "submit" class = "forsubmit" value = "Log In"> 
   </form>
</div> 
<p> Email entered is : {{emailid}} </p>

  在html文件中，我们使用了方括号中的窗体组作为表单；例如，[formGroup] = ”formdata。提交时，该函数被称为onClickSubmit，为其传递formdata.value。

  使用输入标记formControlName。它被赋予一个我们在app.component.ts文件中使用的值。

  单击提交时，控件将传递给在app.component.ts文件中定义的onClickSubmit函数。

onclick_submit.jpg

  单击登录时，该值将显示在上面的屏幕截图中。

表单校验

  现在让我们讨论使用模型驱动表单的表单验证。您可以使用内置的表单验证，也可以使用自定义验证方法，我们将在表单中使用这两种方法。我们将继续前面一节中创建的相同示例。对于Angular 7，我们需要从@angular/forms导入验证器，如下所示

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

  Angular有内置的验证器，如强制字段、最小长度、最大长度和正则表达式。这些将使用验证器模块进行访问。

  如果某个特定字段是强制的，您可以只添加验证器或验证器数组来告诉Angular。现在让我们在其中一个输入文本框上尝试，即email id。对于email id，我们添加了以下验证参数。

  •   Required

  •   Pattern matching

  这是代码在app.component.ts中进行验证的方式。

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 4 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("")
      });
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

  在Validators.compose中，您可以在输入字段中添加要验证的内容列表。现在，我们已经添加了必需的和模式匹配的参数，以便只接收有效的电子邮件。

  在app.component.html，如果任何表单输入无效，提交按钮将被禁用。这是按照以下方式完成的。

<div> 
   <form [formGroup] = "formdata" (ngSubmit) = "onClickSubmit(formdata.value)"> 
      <input type = "text" class = "fortextbox" name = "emailid" 
         placeholder = "emailid" formControlName = "emailid"> 
      <br/> 
    
      <input type = "password" class = "fortextbox" name = "passwd" 
         placeholder = "passwd" formControlName = "passwd">
      <br/> 
      
      <input type = "submit" [disabled] = "!formdata.valid" class = "forsubmit" 
         value = "Log In"> 
   </form> 
</div>
<p> Email entered is : {{emailid}} </p>

  对于提交按钮，我们在方括号中添加了disabled，它被赋予以下值。

!formdata.valid.

  因此，如果formdata.valid无效，按钮将保持禁用状态，用户将无法提交它。

  让我们看看这在浏览器中是如何显示的。

formdata.jpg

  在上述情况下，输入的email id无效，因此登录按钮被禁用。现在让我们尝试输入有效的email id，看看有什么不同。

enter_valid_id.jpg

  现在，输入的email id是有效的。因此，我们可以看到登录按钮已启用，用户将能够提交它。这样，输入的email id显示在底部。

  现在让我们尝试使用相同的表单进行自定义验证。对于自定义验证，我们可以定义自己的自定义函数，并在其中添加所需的细节。我们现在将看到下面的例子。

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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7 Project!';
   todaydate;
   componentproperty;
   emailid;
   formdata;
   ngOnInit() {
      this.formdata = new FormGroup({
         emailid: new FormControl("", Validators.compose([
            Validators.required,
            Validators.pattern("[^ @]*@[^ @]*")
         ])),
         passwd: new FormControl("", this.passwordvalidation)
      });
   }
   passwordvalidation(formcontrol) {
      if (formcontrol.value.length < 5) {
         return {"passwd" : true};
      }
   }
   onClickSubmit(data) {this.emailid = data.emailid;}
}

  在上面的例子中，我们创建了一个passwordvalidation函数，在 formcontrol - passwd: new FormControl("", this.passwordvalidation).的前一节中也使用了该函数。

  在我们创建的函数中，我们将检查输入字符的长度是否合适。如果字符少于五个，将返回如上所示的passwd为true-返回 {"passwd" : true};。如果字符超过五个，它将认为它是有效的，并且登录将被启用。

  现在让我们看看这在浏览器中是如何显示的。

password.jpg

  我们在密码中只输入了三个字符，登录被禁用。要启用登录，我们需要五个以上的字符。现在让我们输入有效长度的字符并检查。

email_displayed.jpg

  由于email id和密码都有效，登录被启用。当我们登录时，电子邮件显示在底部。


捐赠

友情链接