search
HomeWeb Front-endJS TutorialAn introduction to responsive forms in Angular

This article mainly introduces the introduction of responsive forms in Angular. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

The responsive form is in the component class Write the logic, validation rules, unlike template-driven forms where control is done in the template. Reactive forms are flexible and can be used to handle any complex form scenario. We write more component code and less HTML code, making unit testing easier.

Form base and interface

Form base


     

            

  

The next functions we want to implement are as follows:

  • Bind name, Values ​​of email and confirm input boxes

  • Add form validation function to all input boxes

  • Display validation exception information

  • When form verification fails, form submission is not allowed

  • Form submission function

User interface

// signup.interface.ts
export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

ngModule and reactive forms

Before we continue to introduce the reactive forms form in depth, we must import the ReactiveFormsModule in the @angular/forms library in @NgModule:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule
  ],
  declarations: [...],
  bootstrap: [...]
})
export class AppModule {}
Friendly reminder: If you use reactive forms, import ReactiveFormsModule; if template-driven forms are used, import FormsModule.

Reactive approach

We will create a SignupFormComponent based on the base form defined above:

signup-form.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  template: `
    
...
  ` }) export class SignupFormComponent {   constructor() {} }

This is a Basic components. Before we implement the above functions, we need to first introduce the concepts and uses of FormControl, FormGroup, and FormBuilder.

FormControl and FormGroup

Let’s first introduce the concepts of FormControl and FormGroup:

FormControl - It is a class that provides support for a single form control and can be used to track controls value and validation status, in addition to providing a series of public APIs.

Usage example:

ngOnInit() {
  this.myControl = new FormControl('');
}
FormGroup - Contains a set of FormControl instances that can be used to track the value and validation status of the FormControl group, and also provides a series of public APIs.

Usage example:

ngOnInit() {
  this.myGroup = new FormGroup({
    name: new FormControl(''),
    location: new FormControl('')
  });
}

Now that we have created FormControl and FormGroup instances, let’s take a look at how to use it:


  Name:    Location: 

In the above example, we must use [ formGroup] binds the myGroup object we created. In addition, we also use the formControlName directive to bind the FormControl control we created. The form structure at this time is as follows:

FormGroup -> 'myGroup'
    FormControl -> 'name'
    FormControl -> 'location'

Implementing our FormGroup model

signup.interface.ts

export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

The corresponding form structure is as follows:

FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

Yes, we can create nested FormGroup collections! Let's update the component (without the initial data):

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

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl(''),
      account: new FormGroup({
        email: new FormControl(''),
        confirm: new FormControl('')
      })
    });
  }
}

If we want to set the initial data, we can do so as in the example above. Normally, we obtain the initial information of the form through the API interface provided by the server.

Binding our FormGroup model

Now that we have instantiated the FormGroup model, it is time to bind to the corresponding DOM element. Specific examples are as follows:


     

            

  

Now the associated information between the FormGroup and FormControl objects and the DOM structure is as follows:

// JavaScript APIs
FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

// DOM bindings
formGroup -> 'user'
    formControlName -> 'name'
    formGroupName -> 'account'
        formControlName -> 'email'
        formControlName -> 'confirm'

Reactive submit

Like the template-driven form, we can pass ngSubmit Output attributes, handle form submission logic:


  ...

Reactive error validation

Next we add validation rules to the form, first we need to import Validators from @angular/forms. Specific usage examples are as follows:

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

Through the above examples, we can see that if the form control contains multiple validation rules, you can use an array to declare multiple validation rules. If you only include one validation rule, just declare it directly. This way, we don't need to add the required attribute to the input control in the template. Next, let's add the form submission function when the form verification fails:


  ...   

Then the question is, how do we get the verification information of the form control? We can use the method introduced in template-driven forms, as follows:


  {{ user.controls.name?.errors | json }}

In addition, we can also use the API provided by the FormGroup object to obtain the error information of the form control validation:


  {{ user.get('name').errors | json }}

Now we Let’s take a look at the complete code:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from './signup.interface';

@Component({
  selector: 'signup-form',
  template: `
    
             

        Name is required       

      

        Minimum of 2 characters       

      

                 

          Email is required         

                 

          Confirming email is required         

                  
  ` }) export class SignupFormComponent implements OnInit {   user: FormGroup;   constructor() {}   ngOnInit() {     this.user = new FormGroup({       name: new FormControl('', [Validators.required, Validators.minLength(2)]),       account: new FormGroup({         email: new FormControl('', Validators.required),         confirm: new FormControl('', Validators.required)       })     });   }   onSubmit({ value, valid }: { value: User, valid: boolean }) {     console.log(value, valid);   } }

The function is implemented, but the way to create a FormGroup object is a bit cumbersome. The Angular team is also aware of this, so it provides us with FormBuilder to simplify the above operations.

Simplifying with FormBuilder

First we need to import FormBuilder from @angular/forms:

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

export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ...
}

Then we use the group() method provided by the FormBuilder object to create the FormGroup and FormControl object:

Code before adjustment (without FormBuilder):

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

Adjusted code (with FormBuilder):

ngOnInit() {
  this.user = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    account: this.fb.group({
      email: ['', Validators.required],
      confirm: ['', Validators.required]
    })
  });
}

Compare the before and after adjustments Code, does it feel a lot more convenient all of a sudden? At this time, the complete code after the update is as follows:

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.user = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required]
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
}

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

related suggestion:

The release content of art-dialog-vue2.0, a dialog plug-in based on vue.js

The difference between AngularJs and Angular’s ​​commonly used instructions

The above is the detailed content of An introduction to responsive forms in Angular. For more information, please follow other related articles on the PHP Chinese website!

Statement
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
Behind the Scenes: What Language Powers JavaScript?Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The Future of Python and JavaScript: Trends and PredictionsThe Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Python vs. JavaScript: Development Environments and ToolsPython vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function