Angular7 - Form表单

首页 / Angular7入门教程 / Angular7 - Form表单

在本章中,我们将了解如何在Angular 7中使用表单。我们将讨论使用表单的两种方式-

  • Template driven form(模板驱动表单)
  • Model driven form(模型驱动表单)

模板驱动表单

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

我们将创建一个简单的登录表单,并在表单中添加email id,password和 submit 按钮。首先,我们需要从@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>

我们使用input创建了一个简单的表单,其中包含email id,password和submit 按钮。我们已经为其分配了type,name和placeholder。

在模板驱动的表单中,我们需要通过添加 ngModel 指令和 name 属性来创建模型表单控件。

如果您看到了,我们还将ngForm添加到 #userlogin 中, ngForm 指令需要添加到我们创建的表单模板中,我们还添加了函数 onClickSubmit 并为其分配了 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; 
}

浏览器显示-

Email ID

表单如下图所示。让我们在其中输入数据,然后在"submit"函数中,对email id 发出提示,如下所示-

Form Looks

模型驱动表单

在模型驱动的表单中,我们需要从@angular/forms导入ReactiveFormsModule,并在imports数组中使用它。

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;}
}

变量表单数据在类的开头进行初始化,并使用FormGroup进行初始化。

这就是在表单UI中如何显示值的方式。

Form Group

我们已经使用formdata来初始化表单值。我们需要使用UI app.component.html 形式的内容。

链接:https://www.learnfk.comhttps://www.learnfk.com/angular7/angular7-forms.html

来源:LearnFk无涯教程网

<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,如[formGroup] =" formdata"。提交后,该函数称为 onClickSubmit ,传递了 formdata.value 。

单击提交后,控件将传递到函数 onClickSubmit ,该函数在 app.component.ts 文件中定义。

Onclick Submit

单击登录后,将显示该值,如上面的屏幕截图所示。

表单验证

现在让我们讨论使用模型驱动的表单进行表单验证。您可以使用内置的表单验证,也可以使用自定义验证方法。我们将在表格中使用这两种方法。我们将继续在上一节中创建的示例。使用Angular 7,我们需要从 @angular/forms 导入 Validators ,如下所示-

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

Angular具有内置的验证器,如必填字段,最小长度,最大长度。这些将使用验证器模块进行访问。

您可以只添加必要的验证器或一组验证器,以告知Angular是否必须填写特定字段。对于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 中,您可以在输入字段上添加要验证的事物列表。现在,我们添加了required 和 pattern matching 参数以仅接收有效的电子邮件。

在 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>

对于"提交"按钮,我们在方括号中添加了禁用options,该options具有以下值。

!formdata.valid.

因此,如果formdata.valid无效,则该按钮将保持禁用状态,并且用户将无法提交该按钮。

FormData

在上述情况下,输入的电子邮件ID无效,因此禁用了登录按钮。现在让我们尝试输入有效的电子邮件ID并查看区别。

Enter Valid Id

现在,输入的电子邮件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,如上所示- return {" passwd":true};。如果字符超过五个,它将认为它是有效的并且将启用登录。

现在让我们看看它如何在浏览器中显示-

Password

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

Email Displayed

这一章《Angular7 - Form表单》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

猜你喜欢

Flink核心技术与实战 -〔张利兵〕

手把手教你玩音乐 -〔邓柯〕

大数据经典论文解读 -〔徐文浩〕

JavaScript进阶实战课 -〔石川〕

好记忆不如烂笔头。留下你的足迹吧 :)