Angular7 表格


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

  • 模板驱动表单
  • 模型驱动形式

模板驱动形式


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

现在让我们考虑处理模板驱动的表单。我们将创建一个简单的登录表单,并在表单中添加电子邮件 ID、密码和提交按钮。首先,我们需要从 @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 { }

So in app.module.ts ,我们已经导入了 表单模块 并在导入数组中添加相同的内容,如突出显示的代码所示。

现在让我们在 app.component.html file.

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

我们创建了一个带有输入标签的简单表单,其中包含电子邮件 ID、密码和提交按钮。我们为它分配了类型、名称和占位符。

在模板驱动的表单中,我们需要通过添加 ngModel 指令和 name 属性。因此,无论我们希望 Angular 在哪里访问表单中的数据,都可以将 ngModel 添加到该标签,如上所示。现在,如果我们必须读取 emailid 和 passwd,我们需要在其中添加 ngModel。

如果你看到了,我们还将 ngForm 添加到 #用户登录 . The ngForm 指令需要添加到我们创建的表单模板中。我们还增加了功能 点击提交 并分配 用户登录值 to it.

现在让我们在 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

表格如下所示。让我们在其中输入数据,在提交功能中,电子邮件 id 如下所示:

Form Looks

模型驱动形式


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

有一个变化进入 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 { }

In app.component.ts ,我们需要为模型驱动表单导入一些模块。例如, 导入 { FormGroup,FormControl } from ' @角/形式 '.

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 进行初始化。变量 emailid 和 passwd 使用默认值初始化,以在表单中显示。如果需要,你可以将其保留为空白。

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

Form Group

我们已经使用 formdata 来初始化表单值;我们需要在表单 UI 中使用相同的 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 作为表单;例如,[formGroup] = ”formdata”。提交时,调用该函数 点击提交 为此 formdata.value 已通过。

输入标签 表单控件名称 用来。它被赋予了我们在 app.component.ts file.

单击提交时,控件将传递给函数 点击提交 ,其定义在 app.component.ts file.

Onclick Submit

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

表单验证


现在让我们讨论使用模型驱动表单的表单验证。你可以使用内置的表单验证,也可以使用自定义验证方法。我们将在表格中使用这两种方法。我们将继续使用我们在前一部分中创建的相同示例。使用 Angular 7,我们需要导入 验证器 from @角/形式 如下所示:

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

Angular 有内置的验证器,例如 必填项 , 最小长度 , 最长长度 , and pattern .这些将使用 Validators 模块进行访问。

你可以只添加验证器或验证器数组来告诉 Angular 某个特定字段是否是必需的。现在让我们在其中一个输入文本框(即电子邮件 ID)上尝试相同的操作。对于email id,我们添加了以下验证参数:

  • Required
  • 模式匹配

这就是代码在 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;}
}

In Validators.compose ,你可以在输入字段中添加要验证的内容列表。现在,我们添加了 required and the 模式匹配 参数只接受有效的电子邮件。

In the 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>

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

!formdata.valid.

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

让我们看看它在浏览器中是如何工作的:

FormData

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

Enter Valid Id

现在,输入的电子邮件 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;}
}

在上面的例子中,我们创建了一个函数 密码验证 并且在 formcontrol 的上一节中使用了相同的 - passwd: new FormControl("", this.passwordvalidation) .

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

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

Password

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

Email Displayed

登录已启用,因为电子邮件 ID 和密码均有效。当我们登录时,电子邮件显示在底部。