Mudanças entre as edições de "Model Driven Forms (Reactive forms) in Angular2"

De Basef
Ir para: navegação, pesquisa
(Criou página com 'In your Module: <source lang="typescript"> import { ReactiveFormsModule } from '@angular/forms'; </source> Add `ReactiveFormsModule` to `imports` section. In your Component...')
 
 
(14 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
−
In your Module:
+
A complete guide to reactive forms: [http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html Thoughtram - Model Driven Forms in Angular 2]
  
−
<source lang="typescript">
+
=== 1) In your Module: ===
 +
 
 +
<source lang="javascript">
 
import { ReactiveFormsModule } from '@angular/forms';
 
import { ReactiveFormsModule } from '@angular/forms';
 
</source>
 
</source>
Linha 7: Linha 9:
 
Add `ReactiveFormsModule` to `imports` section.
 
Add `ReactiveFormsModule` to `imports` section.
  
−
In your Component:
+
=== 2) In your Component: ===
  
−
<source lang="typescript">
+
<source lang="javascript">
 
import { FormGroup, FormControl } from '@angular/forms';
 
import { FormGroup, FormControl } from '@angular/forms';
  
Linha 23: Linha 25:
 
}
 
}
 
</source>
 
</source>
 +
 +
or
 +
 +
<source lang="javascript">
 +
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 +
 +
export class MyComponent {
 +
    myForm: FormGroup;
 +
 +
    constructor(private fb: FormBuilder) {
 +
        this.myForm = fb.group({
 +
            'field1': ['', Validators.required],
 +
            'field2': ['']
 +
        });
 +
    }
 +
}
 +
</source>
 +
 +
=== 3) In your template: ===
 +
 +
These are similar to ngModel of Angular1:
 +
 +
<source lang="xml">
 +
 +
<form [formGroup]="myForm">
 +
    <input type="text" formControlName="field1" />
 +
    <input type="text" formControlName="field2" />
 +
</form>
 +
</source>
 +
 +
[[Category: Angular]]

Edição atual tal como às 10h39min de 27 de janeiro de 2020

A complete guide to reactive forms: Thoughtram - Model Driven Forms in Angular 2

1) In your Module:

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

Add `ReactiveFormsModule` to `imports` section.

2) In your Component:

import { FormGroup, FormControl } from '@angular/forms';
 
export class MyComponent {
    myForm: FormGroup;
 
    constructor() {
        this.myForm = new FormGroup({
            field1: new FormControl(),
            field2: new FormControl()
        });
    }
}

or 

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
export class MyComponent {
    myForm: FormGroup;
 
    constructor(private fb: FormBuilder) {
        this.myForm = fb.group({
            'field1': ['', Validators.required],
            'field2': ['']
        });
    }
}

3) In your template:

These are similar to ngModel of Angular1: 

<form [formGroup]="myForm">
    <input type="text" formControlName="field1" />
    <input type="text" formControlName="field2" />
</form>
Disponível em "http://www.basef.com.br/index.php?title=Model_Driven_Forms_(Reactive_forms)_in_Angular2&oldid=2296"