Angular advanced learning: in-depth understanding of routing and forms-JS Tutorial-php.cn

This article is an advanced study of Angular. Let’s learn more about routing and forms in Angular. I hope it will be helpful to everyone! Angular advanced learning: in-depth understanding of routing and forms

Angular advanced learning: in-depth understanding of routing and forms

Angular routing introduction

In a single-page application, you need to switch back and forth between different views (components) , instead of getting a new page from the server, to implement navigation from one view to another, you need to use Router in Angular. [Related tutorial recommendations: "angular tutorial"]

Scenarios that require route jump: If there are two on the page Jump links, we hope that when clicking these links, you can jump to the product list page and personal center page respectively. We can first create two components, GoodsListComponent and PersonalCenterComponent. The specific process is as follows:

Routing creation 1. Create a new file app-routing.module.ts, which will be redirected Put the view configuration inside

import { NgModule } from &#39;@angular/core&#39;;
// 引入路由模块 RouterModule和 Routes
import { Routes, RouterModule } from &#39;@angular/router&#39;; 
// 引入在不同URL下，需要展示的组件
import { GoodsListComponent } from &#39;./goods-list/goods-list.component&#39;;
import { PersonalCenterComponent } from &#39;./personal-center/personal-center.component&#39;;

// 配置的路由数组
const routes: Routes = [
  {
    path: &#39;goodsList&#39;, // 定义路由名称
    component: GoodsListComponent, // 指定显示的那个组件
  },
  {
    path: &#39;personalCenter&#39;, // 定义路由名称
    component: PersonalCenterComponent, // 指定显示的那个组件
  }
];

@NgModule({
   // forRoot() 方法会创建一个 NgModule，其中包含所有指令、给定的路由以及 Router 服务本身。
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Copy after login

Define your routes in the Routes array (Each route in this array is a JavaScript object containing two properties. Chapter One attribute path defines the URL path of the route. The second attribute component defines the components that need to be displayed under the corresponding path)

2. Import AppRoutingModule# in app.module.ts ##

import { AppRoutingModule } from &#39;./app-routing.module&#39;;

Copy after login

3. Add these routes in app.component.html to control the display of navigation

 <div class="route-change-container">
  <a routerLink="/goodsList">切换到商品列表组件</a> <!--routerLink将你定义的路由连接到模板文件中-->
  <a routerLink="/personalCenter">切换到个人中心组件</a>
</div>

<router-outlet></router-outlet>  <!--此指令通过路由来动态加载组件-->

Copy after login

.
Next, add the
tag to the template. This element notifies Angular that you can update your app's view with the selected route's components. The usage is the same as that of components. It serves as a placeholder to mark the position where the router should display the component.

Introduction to two important APIs in routing

ActivatedRoute

Used for

{Get routing information}

ActivatedRoute official website

import { Component, OnInit } from &#39;@angular/core&#39;;
import { ActivatedRoute } from &#39;@angular/router&#39;; // ① 先引入ActivatedRoute

@Component({
  selector: &#39;app-goods-list&#39;,
  templateUrl: &#39;./goods-list.component.html&#39;,
  styleUrls: [&#39;./goods-list.component.scss&#39;]
})
export class GoodsListComponent implements OnInit {

  constructor(
    private route: ActivatedRoute, // ② 依赖注入这个服务
  ) {}

 // ③ 在初始化的生命周期中去或者url的路由信息
  public ngOnInit(): void {
    // 第一种获取参数的方式
    const params = this.route.snapshot.params;
    
    // 第二种获取参数的方式
    this.route.params.subscribe(params => {
      console.log(params);
    });
  }

}

Copy after login

The difference and use of the above two methods of obtaining parameters:
route.snapshot:
Needs direct access to parameters, mainly to obtain the
initial value, used without subscription snapshot;
route.params.subscribe():
参数每次变化都要获取到或者需要连续导航多次的时候的用params;

Router

是一个 ${提供导航和操纵URL}$ 的模块,具体提供的方法可参照Router官网,开发中常用到的方法如下,具体讲解在路由传参中会详细介绍：

// 使用前，需要在组件中先引入Router这个服务类
import { Router } from &#39;@angular/router&#39;;

Copy after login

navigate() 该方法支持的参数类型和routerLink指令一样，所以他们的作用也是一样的;
navigateByUrl() 绝对路由；
每次导航前都会调用events方法；(暂时仅了解)

路由传参以及获取

路由传参的两种形式

1. params （是/:id 动态路由）

使用场景： 比如当我们点击商品列表链接时，希望把用户信息，或者商品种类信息通过url,传到商品列表的组件中去。

// 需要配置路由
const routes: Routes = [
 {
   path: &#39;goodsList/:id&#39;, // 定义路由名称
   component: GoodsListComponent, // 指定显示的那个组件
 },
];

Copy after login

2. queryParams（是?id=xx 形式）

使用场景： 当我们希望通过url传递多个参数的时候，可以选择用这种方式进行路由传参

1个参数可以优先用动态路由，2个以上还是用query更加方便点

路由中传参的3种具体方法

1. routerLink

单一参数：

 <a [routerLink]="[&#39;/goodsList&#39;, id]" routerLinkActive="active-class">切换到商品列表组件</a>
 // 其中/goodsListl是我设置的路由path，id是需要传递的参数   
 // 多个参数的时候，也可以用这种形式，只不过看起来不够直观，所以不推荐多个参数的时候也用这种方法

Copy after login

多个参数：

 <a [routerLink]="[&#39;/personalCenter&#39;]" [queryParams]="{name: &#39;zs&#39;, age: 16}">切换到个人中心组件</a>
 // 参数的格式可以自行组织成各种object

Copy after login

routerLinkActive 跟踪元素上链路路由当前是否处于活动状态。并允许你指定一个或者多个css类，以便在链接路由处于活动状态时添加该元素。

2. router.navigate

基于所提供的命令数组和起点路由进行导航。如果没有指定起点路由，则从根路由开始进行绝对导航

单一参数：

public goToGoodsListPage(): void {
    // 第一种方式
    this._router.navigate([`/goodsList/${this.id}`]);
    // 第二种方式 与第一种方式达到相同的效果
    this._router.navigate([&#39;/goodsList&#39;, this.id]);
  }
  
// html中调用这个方法，等同于使用a标签的routerLink属性
<button (click)="goToGoodsListPage()">切换到商品列表组件</button>

Copy after login

多个参数：

  public goToPersonalCenterPage(): void {
    this._router.navigate([&#39;/personalCenter&#39;], {queryParams:{name: &#39;zs&#39;, age: 16}});
  }
  
  // html中调用
   <button (click)="goToPersonalCenterPage()">切换到个人中心组件</button>

Copy after login

3. router.navigateByUrl

基于所提供的 URL 进行导航，必须使用绝对路径。对于单一参数和多个参数的使用方法与router.navigate一致。

// 传的第一个参数是数组的形式，而navigate的第一个参数是数组的方式
// 他的传参目前是拼接在url上边的
  public goToPersonalCenterPage(): void {
    this._router.navigateByUrl(`/personalCenter?name=zs&age=16`);
  }

Copy after login

在路由中接收参数的2种方式

1. 接收params类型的参数

import { ActivatedRoute } from &#39;@angular/router&#39;;
constructor(
    private _route: ActivatedRoute,
  ) {}
  
public ngOnInit(): void {
    // 第一种只获取初始值方式
    const param = this.route.snapshot.params;
    // 第二种动态获取方式
    this.route.params.subscribe(params => {
      console.log(params);
    });
  }

Copy after login

2. 接收queryParams类型的参数

import { ActivatedRoute } from &#39;@angular/router&#39;;
constructor(
    private _route: ActivatedRoute,
  ) {}
  
public ngOnInit(): void {
    // 第一种只获取初始值方式
    const queryParam = this.route.snapshot.queryParams;
    // 第二种动态获取方式
    this.route.queryParams.subscribe(params => {
      console.log(params);
    });
  }

Copy after login

路由重定向

应用场景：当在一个应用中，希望用户默认跳转到某个页面时，就需要使用得到路由重定向。

重定向的组成：

使用重定向源的path
重定向目标的component
pathMatch值来配置路由

{ path: &#39;&#39;,
  redirectTo: &#39;/personalCenter&#39;,
  pathMatch: &#39;full&#39; }, // 重定向到 `personalCenter`

Copy after login

${pathMatch}$ 是一个用来 ${指定路由匹配策略}$ 的字符串。可选项有 prefix（默认值）和 full。

prefix: 以指定的路径开头 (就是path中的值与用户输入的的开头路径是一样的，比如path是”abc“，那么用户输入/abc, /abc/a都是可以的，但是输入 /abcd这样就不可以); 如果path是空，那么所有路由都会匹配到这个页面上

full: 与指定路径完全一样（这个就要求与path要求的路径完全一样，比如说path是‘abc’,那么用户输入/abc ， /abc/是可以的 /abcd，/abc/d是不可以的）; 如果path是空，那么只有localhost:4200后边什么都不加的情况下才匹配到这个页面上。

路由顺序

Router在匹配路由的时候，使用的是” ${先到先得}$ “的策略，所以应当将 ${具体的静态的路由}$ 放前边，然后可以放置 ${默认路由匹配}$ 的空路径路由， ${通配符}$ 路由是最后一个（他可以匹配所以路由，当其他路由都没有匹配对的时候，Router才会选择他）

const routes: Routes = [
  // 静态路由
  {
    path: &#39;goodsList/:id&#39;,
    component: GoodsListComponent,
  },
  {
    path: &#39;personalCenter&#39;, 
    component: PersonalCenterComponent,
  },
  // 默认空路径路由
  {
    path: &#39;&#39;,
    redirectTo: &#39;/personalCenter&#39;,
    pathMatch: &#39;full&#39;
  },
  // 通配符路由
  { path: &#39;**&#39;, component: PageNotFoundComponent },
];

Copy after login

路由嵌套

When the application becomes complex, you may need to create some relative routes outside the root component. These routes become sub-routes, which means that a second $##{}$

场景： 我们需要在个人中心的页面中，跳转到他的两个子页面中，分别是 ${个人配置页面}$ 和 ${个人详情页面}$ ，具体代码实现如下所示：

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
import { GoodsListComponent } from &#39;./goods-list/goods-list.component&#39;;
import { PersonalCenterComponent } from &#39;./personal-center/personal-center.component&#39;;
import { PersonalSettingComponent } from &#39;./personal-setting/personal-setting.component&#39;;
import { PersonalDetailComponent } from &#39;./personal-detail/personal-detail.component&#39;;

const routes: Routes = [
  {
    path: &#39;goodsList/:id&#39;,
    component: GoodsListComponent,
  },
  {
    path: &#39;personalCenter&#39;,
    component: PersonalCenterComponent,
     children: [  // 主要是这里添加了一个children数组，用来存放子路由
      {
        path: &#39;personalDetail&#39;,
        component: PersonalDetailComponent,
      },
      {
        path: &#39;personalSetting&#39;,
        component: PersonalSettingComponent,
      },
     ]
  },
  {
    path: &#39;&#39;,
    redirectTo: &#39;/personalCenter&#39;,
    pathMatch: &#39;full&#39;
  },
];

// 个人中心的html中，需要新增<router-outlet>从而来指定子页面展示的位置
<div class="personal-center-container">
  这是个人中心页面
  <a routerLink="./personalDetail">切换个人详情页面</a>
  <a routerLink="./personalSetting">切换到个人配置页面</a>
</div>
<router-outlet></router-outlet>

Copy after login

子路由和其它路由一样，同时需要 path 和 component。唯一的区别是你要把子路由放在父路由的 children 数组中。

路由懒加载

你可以配置路由定义来实现惰性加载模块，这意味着 Angular只会在 ${需要时}$ 才加载这些模块，而不是在应用 ${启动时}$ 就加载全部。

1、先给之前的两个页面组件增加一个module文件，然后routes中使用loadChildren代替component进行配置

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
const routes: Routes = [
  {
    path: &#39;goodsList/:id&#39;,
    loadChildren: () => import(&#39;./goods-list/goods-list.module&#39;)
                      .then(m => m.GoodListModule)
  },
  {
    path: &#39;personalCenter&#39;,
    loadChildren: () => import(&#39;./personal-center/personal-center.module&#39;)
                      .then(m => m.PersonalCenterModule)
  },
  {
    path: &#39;&#39;,
    redirectTo: &#39;/personalCenter&#39;,
    pathMatch: &#39;full&#39;
  },
];

@NgModule({
   // forRoot() 方法会创建一个 NgModule，其中包含所有指令、给定的路由以及 Router 服务本身。
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Copy after login

2、在之前的两个页面组件中添加路由模块文件，添加一个指向该组件的路由。

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
import { GoodsListComponent } from &#39;./goods-list.component&#39;;

const routes: Routes = [
  {
    path: &#39;&#39;,
    component: GoodsListComponent
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class GoodsListRoutingModule { }

Copy after login

路由守卫（仅了解）

使用路由守卫来防止用户未经授权就导航到应用的某些部分，想了解更多请移步路由守卫官网介绍

用CanActivate来处理导航到某路由的情况。 // 进入路由的时候
用CanActivateChild来处理导航到某子路由的情况。
用CanDeactivate来处理从当前路由离开的情况. // 离开路由的时候
用Resolve在路由激活之前获取路由数据。
用CanLoad来处理异步导航到某特性模块的情况。CanActivate仍然会加载某个模块，canload不会去加载当不满足条件的情况下

export class TestGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean {
      //判断是否可以进入某个路由的逻辑
  }
}

Copy after login

{
  path: &#39;test-path&#39;,
  component: TestComponent,
  canActivate: [TestGuard], // 使用路由守卫guard
}

Copy after login

路由事件(仅了解)

Router 在每次导航过程中都会通过 Router.events 属性发出导航事件。这些事件的范围贯穿从导航开始和结束之间的多个时间点。想了解更多请移步

路由事件官网详细介绍
https://angular.cn/guide/router-reference#router-events

Introduction to forms in Angular

Responsive forms and The difference between template-driven forms

##ResponsiveTemplate-drivenCreate a form modelExplicitly, created in the component classImplicitly, created with instructionsData modelStructured and immutable (observable objects)Unstructured and mutable (two-way data binding)Data flowSyncAsynchronousForm validationFunctionInstruction

常用表单公共基础类

响应式表单和模板驱动表单都建立在下列基础类之上。

FormControl 实例用于追踪单个表单控件的值和验证状态。
FormGroup 用于追踪一个表单控件组的值和状态。
FormArray 用于追踪表单控件数组的值和状态。（了解）

模板驱动表单

${依赖}$ 模板中的 ${指令}$ 来创建和操作底层的对象模型。主要用于添加简单的表单，使用起来较简单，但是扩展性方面不如响应式表单。当控件值更新的时候相关的属性值会被修改为新值。

创建表单

<!--   #form是模板引用变量,他就代表是form整个元素，我们可以在当前模板的任何地方使用模板引用变量。-->
<!--  这些变量提供了从模块中直接访问元素的能力 -->

<!--  name名称一定要加上 因为表单中的所有组件和控件都应该有名称-->
<form (ngSubmit)="onSubmit(myform.value);" #myform="ngForm" novalidate>
  <label for="name">姓名: </label>
  <input type="text" name="name" [(ngModel)]="name">
  <label for="password">密码: </label>
  <input type="password" name="password" [(ngModel)]="password">
  <button>提交</button>
</form>

Copy after login

模板驱动表单中验证输入

<!--假如我们希望给上述的表单做个校验，密码不能为空，名字的长度不能少于2个字符-->
<form (ngSubmit)="onSubmit(myform);" #myform="ngForm">
  <label for="name">姓名: </label>
  <input type="text" name="name" [(ngModel)]="name" minlength="2">
  <label for="password">密码: </label>
  <input type="password" name="password" [(ngModel)]="password" required>
  <button>提交</button>
  
  <!-- 主要通过hasError方法来实现-->
  <div *ngIf="myform.form.hasError(&#39;minlength&#39;, &#39;name&#39;)">姓名的长度不能少于2位</div>
  <div *ngIf="myform.form.hasError(&#39;required&#39;, &#39;password&#39;)">密码不能为空</div>
</form>

Copy after login

响应式表单(重点)

提供对 ${底层表单对象模型}$ 直接、显式的访问。它们与模板驱动表单相比，更加健壮，它们的可扩展性、可复用性和可测试性都更高。而且控件更新的 ${效率更高}$ ，因为FormControl 的实例总会返回一个新值，而不会更新现有的数据模型，如果表单是你的应用程序的关键部分，或者可扩展性很强，那就使用响应式表单

使用响应式表单

1、在模块文件中引入响应式表单模块

import { ReactiveFormsModule } from &#39;@angular/forms&#39;;

Copy after login

2、在组件中引入表单组

import { FormGroup, FormControl } from &#39;@angular/forms&#39;;

Copy after login

3、创建一个FormGroup实例，并把这个FormGroup模型关联到视图

 this.profileForm = new FormGroup({
      name: new FormControl(&#39;&#39;),
      password: new FormControl(&#39;&#39;),
   });

Copy after login

<form [formGroup]="profileForm" (ngSubmit)="submitForm(profileForm.value)">
    <label for="name">First Name: </label>
    <input id="name" type="text" formControlName="name">
    
    <label for="password">Last Name: </label>
    <input id="password" type="text" formControlName="password">
    <button>提交</button>
</form>

Copy after login

表单嵌套

表单组可以同时接受 ${单个表单控件实例}$ 和其它表单组实例作为其 ${子控件}$ 。这可以让复杂的表单模型更容易维护，并在逻辑上把它们分组到一起。

1、创建一个嵌套的表单组。

this.profileForm = new FormGroup({
      name: new FormControl(&#39;&#39;, [Validators.required]),
      password: new FormControl(&#39;&#39;),
      // 在表单中嵌套一个address的表单组
      address: new FormGroup({
        street: new FormControl(&#39;&#39;),
        city: new FormControl(&#39;&#39;),
      })
   });

Copy after login

2、在模板中对这个嵌套表单分组。

<form [formGroup]="profileForm" (ngSubmit)="submitForm(profileForm.value)">
    <label for="name">First Name: </label>
    <input id="name" type="text" formControlName="name">
    <label for="password">Last Name: </label>
    <input id="password" type="text" formControlName="password">
    
    // 使用formGroupName来声明新的表单组
    <div formGroupName="address">
        <h3>Address</h3>
      
        <label for="street">Street: </label>
        <input id="street" type="text" formControlName="street">
      
        <label for="city">City: </label>
        <input id="city" type="text" formControlName="city">
    </div>
    <button>提交</button>
</form>

Copy after login

表单验证

控件状态的字段

在学习表单验证之前，我们先来了解一下angular针对表单所提供的一些 ${状态字段}$ ，这些字段可帮助用户决定在那些阶段去做表单验证。

touched 和 untouched

用来判断用户是否获取过焦点，如果获取过焦点则touched=true; untouched=false,如果从来没有获取过焦点，touched=false; untouched=true。

pristine 和 dirty

用来判断用户是否操作过字段,dirty表示用户操作过表单元素，pristine表示未操作过表单元素。

valid 和 invalid

判断表单元素是否有效，当表单元素上有多个验证条件事，只有所有的验证条件都满足验证要求valid才是true,只要有一个验证条件不满足，那么invalid这个属性值就是true。

控件状态的CSS 类

Angular 会自动把很多 ${控件属性}$ 作为 ${CSS 类}$ 映射到控件所在的 ${元素}$ 上。你可以使用这些类来 ${根据表单}$ ${状态}$ 给表单 ${控件元素}$ 添加样式。

.ng-valid
.ng-invalid
.ng-pending
.ng-pristine
.ng-dirty
.ng-untouched
.ng-touched

场景：比如我们希望当控件在不满足验证条件的情况下，控件边框显示成红色~ 实现方式如下：

.ng-touched:not(form){
  &.ng-invalid:not(form){   // 这是scss的一种写法
    border: 1px solid red
  }
}

Copy after login

表单验证的步骤

1、在表单组件中导入一个验证器函数，Angular具体提供了那些内置验证器请参照表单验证器官网

import { Validators } from &#39;@angular/forms&#39;;
// angular提供的内置验证器主要有： min max required email minLength maxLength pattern...

Copy after login

2、把这个验证器添加到表单中的相应字段。

场景：需要做验证的内容分别是，① 名称不能为空； ② 密码不能为空，且最小长度不能少于4; ③住址中的街道不能为空

this.profileForm = new FormGroup({
        name: new FormControl(&#39;&#39;, [Validators.required]),
        password: new FormControl(&#39;&#39;, [Validators.required, Validators.minLength(4)]),
        address: new FormGroup({
          street: new FormControl(&#39;&#39;, [Validators.required]),
          city: new FormControl(&#39;&#39;),
        })
    });

Copy after login

3、在模板中错误信息的提醒逻辑

<form [formGroup]="profileForm" (ngSubmit)="submitForm(profileForm.value)">
<!-- 姓名-->
    <label for="name">姓名: </label>
    <input id="name" type="text" formControlName="name">
     <div [hidden]="profileForm?.get(&#39;name&#39;).valid || profileForm?.get(&#39;name&#39;)?.untouched">
        <p [hidden]="!profileForm.hasError(&#39;required&#39;, &#39;name&#39;)">名字是必填项</p>
    </div>
    
<!-- 密码-->
    <label for="password">密码: </label>
    <input id="password" type="text" formControlName="password">
     <!-- 先验证密码当密码是合法的或者用户从未操作多的时候，不显示错误信息 -->
     <!-- 然后在根据hasError来判断具体的错误提醒-->
    <div [hidden]="profileForm?.get(&#39;password&#39;).valid || profileForm?.get(&#39;password&#39;)?.untouched">
      <p [hidden]="!profileForm.hasError(&#39;minlength&#39;, &#39;password&#39;)">密码的位数不能少于四位</p>
      <p [hidden]="!profileForm.hasError(&#39;required&#39;, &#39;password&#39;)">密码不能为空</p>
    </div>

<!-- 地址表单组-->
    <div formGroupName="address">
        <h3>Address</h3>
        <label for="street">Street: </label>
        <input id="street" type="text" formControlName="street">
        <div [hidden]="profileForm?.get(&#39;address&#39;)?.get(&#39;street&#39;)?.valid || profileForm?.get(&#39;address&#39;)?.get(&#39;street&#39;)?.untouched">
            <div [hidden]="!profileForm.hasError(&#39;required&#39;, [&#39;address&#39;, &#39;street&#39;])">街道不能为空</div>
        </div>
        <label for="city">City: </label>
        <input id="city" type="text" formControlName="city">
    </div>
    <button>提交</button>
</form>

Copy after login

自定义表单验证器

场景： 用户希望在填写手机号的时候，可以验证手机号的格式是否输入正确，便可以通过自定义函数去做这件事

 public ngOnInit(): void {
  this.profileForm = new FormGroup({
    phone: new FormControl(&#39;&#39;, [this.mobileValidator])
  });
  }
  
  public mobileValidator = (control: FormControl): any => {
    const value = control.value;
    // 手规号码正则
    const mobileReg = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
    const result = mobileReg.test(value);
    // 有效值返回null, 无效时返回验证的错误对象，验证对象是名为mobileFormat的验证秘钥属性。值一般可以是任意值
    // mobileFormat 用于在模板中获取错误信息的时候会被再次使用
    return result ? null : {mobileFormat: {info: &#39;手机格式不正确&#39;}};
  }
  
  // 在模板中的使用
  <form [formGroup]="profileForm" (ngSubmit)="submitForm(profileForm.value)">
    <input id="phone" type="text" formControlName="phone">
    <div>{{profileForm?.get(&#39;phone&#39;).errors | json}}</div> // 可以将在自定义函数中定义的报错信息打印出来
    <div [hidden]="profileForm?.get(&#39;phone&#39;).valid || profileForm?.get(&#39;phone&#39;)?.untouched">
        <p [hidden]="!profileForm.hasError(&#39;mobileFormat&#39;, &#39;phone&#39;)">手机格式不正确</p>
    </div>
    <button>提交</button>
</form>

Copy after login

如何更新表单数据

使用setValue()方法来为单个控件设置新值。 setValue() 方法会严格遵循表单组的结构，并整体性替换控件的值。
使用patchValue()方法可以用对象中所定义的任何属性为表单模型进行替换。

使用FormBuilder服务生成控件

FormBuilder 服务提供了一些 ${便捷方法}$ 来生成表单控件。FormBuilder 在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。

服务有三个方法：control()、group() 和 array()。这些方法都是工厂方法，用于在组件类中分别生成 FormControl、FormGroup 和 FormArray。

1.在组件中引入FormBuilder类,并注入服务

import { FormBuilder } from &#39;@angular/forms&#39;;
constructor(private fb: FormBuilder) { }

Copy after login

2.生成表单内容

this.profileForm = this.fb.group({
    name: [&#39;&#39;],
    password: [&#39;&#39;]
  });
  
  // 等同于
  
this.profileForm = new FormGroup({
  name: new FormControl(&#39;&#39;),
  password: new FormControl(&#39;&#39;),
});

Copy after login

跨字段交叉验证（仅了解）

const heroForm = new FormGroup({
  &#39;name&#39;: new FormControl(),
  &#39;alterEgo&#39;: new FormControl(),
  &#39;power&#39;: new FormControl()
}, { validators: identityRevealedValidator });


export const identityRevealedValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const name = control.get(&#39;name&#39;);
  const alterEgo = control.get(&#39;alterEgo&#39;);

  return name && alterEgo && name.value === alterEgo.value ? { identityRevealed: true } : null;
};

Copy after login

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of Angular advanced learning: in-depth understanding of routing and forms. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

4 weeks ago By DDD

Atomfall guide: item locations, quest guides, and tips

1 months ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7677

CakePHP Tutorial

1393

C# Tutorial

1207

What is the format of the account name of steam

win11 activation key permanent

Related knowledge

How to implement page jump after PHP form submission Aug 12, 2023 am 11:30 AM

How to implement page jump after PHP form submission [Introduction] In web development, form submission is a common functional requirement. After the user fills out the form and clicks the submit button, the form data usually needs to be sent to the server for processing, and the user is redirected to another page after processing. This article will introduce how to use PHP to implement page jump after form submission. [Step 1: HTML Form] First, we need to write a page containing a form in an HTML page so that users can fill in the data that needs to be submitted.

How to install Angular on Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js is a freely accessible JavaScript platform for creating dynamic applications. It allows you to express various aspects of your application quickly and clearly by extending the syntax of HTML as a template language. Angular.js provides a range of tools to help you write, update and test your code. Additionally, it provides many features such as routing and form management. This guide will discuss how to install Angular on Ubuntu24. First, you need to install Node.js. Node.js is a JavaScript running environment based on the ChromeV8 engine that allows you to run JavaScript code on the server side. To be in Ub

How to use JavaScript to realize the automatic prompt function of the input box content of the form? Oct 20, 2023 pm 04:01 PM

How to use JavaScript to realize the automatic prompt function of the input box content of the form? Introduction: The automatic prompt function of the form input box content is very common in web applications. It can help users quickly enter the correct content. This article will introduce how to use JavaScript to achieve this function and provide specific code examples. Create the HTML structure First, we need to create an HTML structure that contains the input box and the auto-suggestion list. You can use the following code: <!DOCTYP

How to use JavaScript to implement real-time verification of the input box content of a form? Oct 18, 2023 am 08:47 AM

How to use JavaScript to implement real-time verification of the input box content of a form? In many web applications, forms are the most common way of interaction between users and the system. However, the content entered by the user often needs to be validated to ensure the accuracy and completeness of the data. In this article, we will learn how to use JavaScript to implement real-time verification of the content of the form's input box and provide specific code examples. Creating the form First we need to create a simple table in HTML

Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

Java Apache Camel: Building a flexible and efficient service-oriented architecture Feb 19, 2024 pm 04:12 PM

Apache Camel is an Enterprise Service Bus (ESB)-based integration framework that can easily integrate disparate applications, services, and data sources to automate complex business processes. ApacheCamel uses route-based configuration to easily define and manage integration processes. Key features of ApacheCamel include: Flexibility: ApacheCamel can be easily integrated with a variety of applications, services, and data sources. It supports multiple protocols, including HTTP, JMS, SOAP, FTP, etc. Efficiency: ApacheCamel is very efficient, it can handle a large number of messages. It uses an asynchronous messaging mechanism, which improves performance. Expandable

How to use HTML, CSS and jQuery to realize the advanced function of automatic saving of forms Oct 28, 2023 am 08:20 AM

How to use HTML, CSS and jQuery to implement the advanced function of automatic saving of forms. Forms are one of the most common elements in modern web applications. When users enter form data, how to implement the automatic saving function can not only improve the user experience, but also ensure data security. This article will introduce how to use HTML, CSS and jQuery to implement the automatic saving function of the form, and attach specific code examples. 1. Structure of HTML form. Let’s first create a simple HTML form.

Token-based authentication with Angular and Node Sep 01, 2023 pm 02:01 PM

Authentication is one of the most important parts of any web application. This tutorial discusses token-based authentication systems and how they differ from traditional login systems. By the end of this tutorial, you will see a fully working demo written in Angular and Node.js. Traditional Authentication Systems Before moving on to token-based authentication systems, let’s take a look at traditional authentication systems. The user provides their username and password in the login form and clicks Login. After making the request, authenticate the user on the backend by querying the database. If the request is valid, a session is created using the user information obtained from the database, and the session information is returned in the response header so that the session ID is stored in the browser. Provides access to applications subject to

See all articles