angular reactive form

这篇文章讲了angular reactive form,

这里是angular file upload 组件 https://malcoded.com/posts/angular-file-upload-component-with-express/

原文:https://malcoded.com/posts/angular-fundamentals-reactive-forms/

------------------------------------

Forms are arguably one point where angular really shines.

So learning how forms work in angular is an essential skill.

In this tutorial we are going to take a close look at one of the two ways to create forms in angular. The reactive forms.

We will dive right into code and discover all the details about reactive forms in the angular framework step by step and with easy examples.

So, without further ado, let’s get started!

Forms in Angular

There are two different approaches to forms in Angular.

The first category are the template-driven forms. Using this method, you first create html-input-elements and then use directives like ngModel to bind their value to a component’s variable.

Personally, I’ve used this technique a lot. But that way only because I did not know about the other category.

Reactive Forms.

Reactive Forms a kind of the opposite to template-driven forms. Instead of defining the form in your template, the structure of the form is defined in code.

This maybe sounds a little bit odd now. At least I felt like this.

“Isn’t it twice the work, to define the form in code?”

“And isn’t it much harder to read?”

That was what I asked myself and that is what you should ask yourself, too!

But please wait with that, until you read this article and fully understand the topic.

To answer these questions, let’s dive right in and just build a small example using reactive forms together!

Importing the Module

For this example we are going to use a blank angular-cli application.

I you haven’t done so already, please go ahead and create one:

ng new [name]

As you probably know, Angular is organized in modules.

To use certain features, we first need to import the modules that contain that feature, before we can use it.

This is true for reactive forms, as well.

To use reactive forms, we need to import the ReactiveFormsModule into our parent module.

In our case, the parent module is the AppModule.

Let’s import the required module into it:

src/app.module.ts

import { BrowserModule } from ‘@angular/platform-browser‘
import { NgModule } from ‘@angular/core‘
import { ReactiveFormsModule } from ‘@angular/forms‘

import { AppComponent } from ‘./app.component‘

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
class AppModule {}

Defining a Model

In this example we are going to create a simple contact-form, because I couldn’t think of something more creative.

Before we start creating our form, we first need to define, which information we would like to gather with it.

To do so, we are creating a so called model.

A model is just a class, that contains all the fields, that our data can have.

All we need to do, is to create a new file for that class. Also, I typically create a new folder called models to contain all models of the application.

Inside of that file, we create our model. In this case, the data will be split in two parts.

Personal data about the person using the contact-form and the actual data he/she wants to submit.

The model for that looks like this:

src/models/contact-request.ts

export class ContactRequest {
  personalData: PersonalData
  requestType: any = ‘‘
  text: string = ‘‘
}

class PersonalData {
  email: string = ‘‘
  mobile: string = ‘‘
  country: string = ‘‘
}

As you can see, I have also added default values to each field, as we will require them later.

Setting up a Contact-Component

Next, we need a component, to create our form in.

So let’s just create one!

Just use the following command of the angular-cli:

ng generate component contact

This will create a basic component for us to use. It will also import that component into our AppModule automatically.

Creating a Reactive Form in Angular

Now we can finally start creating our form.

Other than with template-driven forms, we can not simply use the model we have created earlier.

Instead we have to create a different one. One, that is only responsible for the form-representation.

But why doe we have to do that? Isn’t that much more complex that just binding to the model ?

Of course it is.

But binding to the model directly comes with one large downside.

We are altering the original data directly.

Reactive Programming and Immutability

This has become bad-practice in the last couple years, as a paradigm called reactive programming took the programming world over more and more.

Why?

Well, the simplest answer might be, that we loose the original data. If the user decides to abort his action, we can not recover the previous state, as we have overwritten it.

What we do with reactive forms instead, is keeping the data in the form model, until the user hits the submit button.

Only then the data is copied over to the original model, replacing everything. This type of overwriting everything is called “immutable objects”.

Form Controls

To create this form-model, angular uses a class called FormGroup.

To define our form-model, we create a new FormGroup. The constructor of this class then takes an object, that can contain sub-form-groups and FormControls.

FormControls represent the leafs in this tree. They are the smallest possible unit and typically represent a HTML-control (input, select, …) of your template.

In actuall code, let’s create a new method, that creates a new instance of the form-model for us. We call this mehtod: createFormGroup.

src/contact/contact.component.ts

createFormGroup() {
  return new FormGroup({
    personalData: new FormGroup({
      email: new FormControl(),
      mobile: new FormControl(),
      country: new FormControl()
     }),
    requestType: new FormControl(),
    text: new FormControl()
  });
}

You will notice the similarities with our contact-request model.

In fact, I would recommend that you always keep them that similar. That way, you wont have any trouble converting the form-model to your actual model.

Because we want the country and the request Type to be select-able as a drop-down, we also have to provide some options to choose from:

src/contact/contact.component.ts

countries = [‘USA‘, ‘Germany‘, ‘Italy‘, ‘France‘]

requestTypes = [‘Claim‘, ‘Feedback‘, ‘Help Request‘]

Finally, we save the result of that method to a public field, to be accessible in our template.

src/contact/contact.component.ts

contactForm: FormGroup;
constructor() {
    this.contactForm = this.createFormGroup();
}

Here is how your component should look like now:

src/contact/contact.component.ts

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

@Component({
  selector: ‘app-contact‘,
  templateUrl: ‘./contact.component.html‘,
  styleUrls: [‘./contact.component.css‘],
})
class ContactComponent implements OnInit {
  contactForm: FormGroup

  countries = [‘USA‘, ‘Germany‘, ‘Italy‘, ‘France‘]

  requestTypes = [‘Claim‘, ‘Feedback‘, ‘Help Request‘]

  constructor() {
    this.contactForm = this.createFormGroup()
  }

  // Step 1
  createFormGroup() {
    return new FormGroup({
      personalData: new FormGroup({
        email: new FormControl(),
        mobile: new FormControl(),
        country: new FormControl(),
      }),
      requestType: new FormControl(),
      text: new FormControl(),
    })
  }

  ngOnInit() {}
}

Implementing the Template

For now that is all we need to do code-wise.

Let’s take a look how the counterpart, the template will look like.

Basically, our HTML does look just like a regular form. The only difference is, that we have to tell angular, which FormGroup and which FormControl to use for each control.

To see the result, I’ve also added a paragraph to print out our form-model as json.

src/contact/contact.component.html

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()" novalidate>
  <div formGroupName="personalData" novalidate>
    <input formControlName="email" /> <input formControlName="mobile" />
    <select formControlName="country">
      <option *ngFor="let country of countries" [value]="country"
        >{{country}}</option
      >
    </select>
  </div>
  <select formControlName="requestType">
    <option *ngFor="let requestType of requestTypes" [value]="requestType"
      >{{requestType}}</option
    >
  </select>
  <input formControlName="text" />
  <button type="submit" [disabled]="contactForm.pristine">Save</button>
  <button type="reset" (click)="revert()" [disabled]="contactForm.pristine">
    Revert
  </button>
</form>

At this point, your app should be in a runable state again.

In case you didn’t know: You can start your application using the

ng serve

command.

Using the Angular Form-Builder

From the example of our TypeScript code above, we can say that the code is starting to look cluttered already.

To solve that, angular provides a service called FormBuilder. This FormBuilder allows us to build our form-model with less code.

To use the FormBuilder, we need to request it via dependency injection. We do so in the constructor of our component.

src/contact/contact.component.ts

constructor(private formBuilder: FormBuilder) {
    this.contactForm = this.createFormGroup();
}

The FormBuilder class has to be imported from @angular/forms:

src/contact/contact.component.ts

import { FormControl, FormGroup, FormBuilder } from ‘@angular/forms‘

Now we can use that FromBuilder to build our form-model. For demonstration-purposes, I have created a new method called “createFormGroupWithBuilder”. You can just replace you previous code if you want to.

src/contact/contact.component.ts

createFormGroupWithBuilder(formBuilder: FormBuilder) {
    return formBuilder.group({
      personalData: formBuilder.group({
        email: ‘[email protected]‘,
        mobile: ‘‘,
        country: ‘‘
      }),
      requestType: ‘‘,
      text: ‘‘
    });
  }

Using this approach, we have to define the default values of each field. You can just pass them an empty string, or fill it with some default-data as I did with the “email”-field.

Passing a Class to the Form-Builder

I turns out, using the FormBuilder, we can further optimize our code.

Instead of defining our form-model inline, the FormBuilder allows us to pass in any JavaScript object.

So we can just pass in a new instance of our PersonalData class.

src/contact/contact.component.ts

createFormGroupWithBuilderAndModel(formBuilder: FormBuilder) {
    return formBuilder.group({
      personalData: formBuilder.group(new PersonalData()),
      requestType: ‘‘,
      text: ‘‘
    });
  }

However, we have to make sure, that all fields of the form are also present in this object. This is why we have assigned the default values in our contact-request-model.

Extracting the Data from the Form

Now that have talked about our more than enough, it’s time to worry about getting our data out of that form into an contact-request object.

For that, we are using the submit-button, we have created earlier in our template. We also already registered the callback-method “onSubmit”.

To be able to listen to the button-press, we need to implement that callback in our component.

Inside of that callback, we can access the form’s values by its values property.

this.contactForm.value

But we need to be careful here. These values are still referenced by our form. If we just copy that reference and modify the data elsewhere, the form will be impacted, as well. This can cause weird side-effects.

This is why we need to create a copy of the data. In this example we are using Object.assign for that.

const result: ContactRequest = Object.assign({}, this.contactForm.value);

However, that is not enough. Object.assign creates something called a shallow copy. That means that all primary-fields of the object are copied properly, but the references to sub-objects or lists are still the same. Not noticing this problem does cause even more weird side-effects.

Instead what we want to do is create a deep copy. We can either achieve that by doing it copying everything manually or use a utility like lodash’s cloneDeep function. We will use the manual method here.

result.personalData = Object.assign({}, result.personalData);

Overall, the onSubmit method should now look something like this:

src/contact/contact.component.ts

onSubmit() {
    // Make sure to create a deep copy of the form-model
    const result: ContactRequest = Object.assign({}, this.contactForm.value);
    result.personalData = Object.assign({}, result.personalData);

    // Do useful stuff with the gathered data
    console.log(result);
  }

Resetting the Form

Resetting the form is definitely one of the easier parts with reactive forms.

Again, we are going to use the reset-button, we have included into our template already.

All we need to do now, is to implement the revert-callback into our component.

To reset the form, we can either use the form’s reset method without any parameter,

// Resets to blank object
this.contactForm.reset();

which results in an empty object, or pass a set of default parameters along:

// Resets to provided model
this.contactForm.reset({ personalData: new PersonalData(), requestType: ‘‘, text: ‘‘ });

All in all the revert method simply looks like this:

src/contact/contact.component.ts

revert() {
    // Resets to blank object
    this.contactForm.reset();

    // Resets to provided model
    this.contactForm.reset({ personalData: new PersonalData(), requestType: ‘‘, text: ‘‘ });
  }

Conclusion

In this tutorial we learned how to create forms with angular using the reactive-forms method.

I hope you enjoyed this post.

If you did please hit the share button below and help other people understand reactive-forms in angular, as well.

Have a fantastic day!

原文地址:https://www.cnblogs.com/oxspirt/p/10863863.html

时间: 2024-10-12 17:24:37

angular reactive form的相关文章

[Angular2 Form] Reactive Form, FormBuilder

Import module: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MessageComponent } from './message.component'; import messageRoutes from './message.routes'; import {FormsModule, ReactiveFormsModule} f

[Angular2 Form] Create and Submit an Angular 2 Form using ngForm

Forms in Angular 2 are essentially wrappers around inputs that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘sngForm allows you to get a reference to that object and validity and use them to d

[Angular] Reactive Store and AngularFire Observables

A simple store implemenet: import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import 'rxjs/add/operator/pluck'; import 'rxjs/add/operator/distinctUntilChanged'; import {User} from './auth/shared/serv

[Angular2 Form] Reactive Form, show error message for one field

<form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div class="form-field"> <label>Title:</label> <input formControlName="title"> <div class="field-error-message&qu

Angular Reactive Form-响应式表单验证

内建验证规则 Angular中提供了一些內建的Validators,这些验证规则可以在Template-Driven或Reactive表单中使用. 目前 Angular 支持的内建 validators 如下: required - 设置表单控件值是非空的. email - 设置表单控件值的格式是 email. minlength - 设置表单控件值的最小长度. maxlength - 设置表单控件值的最大长度. pattern - 设置表单控件的值需匹配 pattern 对应的模式. 示例 t

angular+ 关于form表单监听变化

// 如果使用表单 loopholeForm: FormGroup; constructor( fb: FormBuilder, private modalRef: NzModalRef, private message: NzMessageService, private cveService: CveService ) { this.loopholeForm = fb.group({ loophole: [null], cveName: [null], cnnvdName: [null],

[Angular2 Form] Validation message for Reactive form

<div class="form-field"> <label>Confirm Password: </label> <input type="text" formControlName="confirm" [(ngModel)]="signup.confirm" name="confrim"> <div *ngIf="!signupForm.

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先需要操作表单的模块引入这两个模块: import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 表单控件响应的几种状态 模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 一般做表单校验及操作推荐用数据驱动的方式,好维护和理解.. 模板驱动 模板驱动:主要是依赖[(ngModel

angularjs2 学习笔记(六) Form

Angular 2 Form表单 在angular2 form表单中我们需要了解表单数据绑定.数据验证.数据提交等内容,在下面的示例中并没有实际提交到后台,这部分内容在今后webapi中加以练习. 表单建立 <form (ngSubmit)="onSubmit(planetForm.value)" #planetform="ngForm"> </form> 这里是一个空的表单ngSubmit是一个事件,用于提交数据,数据则是整个form表单的