web-dev-qa-db-fra.com

Comment obtenir des données de formulaire dans Angular 2

J'ai un formulaire dans mon angular 2 projet.

Je sais comment récupérer des données de l'API. Mais je ne sais pas comment effectuer une opération CRUD à cet endroit.

Quelqu'un peut-il m'aider avec les codes simples sur Comment envoyer des données de formulaire au format JSON à un service Web en PHP/dans une autre langue ...

angularangular2-formsangular2-services
20
Deepak swain

Dans Angular 2+, nous traitons les formulaires de deux manières:

  • Basé sur des modèles
  • Réactif

Ici, je partage du code pour des formulaires simples basés sur des modèles. Si vous voulez le faire en utilisant des formes réactives, cliquez sur ce lien: La forme réactive angulaire2 confirme l’égalité des valeurs

Votre fichier de module devrait avoir ceci:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MyApp } from './components'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [MyApp],
  bootstrap: [MyApp]
})
export class MyAppModule {

}

platformBrowserDynamic().bootstrapModule(MyAppModule)

Fichier HTML d'inscription simple:

<form #signupForm="ngForm" (ngSubmit)="registerUser(signupForm)">
  <label for="email">Email</label>
  <input type="text" name="email" id="email" ngModel>

  <label for="password">Password</label>
  <input type="password" name="password" id="password" ngModel>

  <button type="submit">Sign Up</button>
</form>

Maintenant, votre fichier registration.ts devrait ressembler à ceci:

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

@Component({
  selector: 'register-form',
  templateUrl: 'app/register-form.component.html',
})
export class RegisterForm {
  registerUser(form: NgForm) {
    console.log(form.value);
    // {email: '...', password: '...'}
    // ... <-- now use JSON.stringify() to convert form values to json.
  }
}

Pour gérer ces données côté serveur, utilisez ce lien: Comment publier un objet JSON avec Http.post (Angular 2) (côté serveur php) . Je pense que c'est plus que suffisant.

34
Amit kumar