reactivos - validar formulario angular 5

Cómo obtener datos de formulario en Angular 2

Question

Tengo un formulario en mi proyecto angular 2.

Sé cómo recuperar datos de la API. Pero no sé cómo realizar una operación CRUD allí.

¿Alguien puede ayudarme con los códigos simples sobre cómo enviar datos de formularios en formato JSON a un servicio web en PHP / cualquier otro idioma ...

La ayuda será apreciada. Gracias

Answer 1

En Angular 2+ manejamos formas de dos maneras:

• Impulsado por plantillas
• Reactivo

Aquí estoy compartiendo código para formularios simples basados ​​en plantillas. Si desea hacerlo utilizando formas reactivas, verifique este enlace: Forma reactiva Angular2 confirme la igualdad de valores

Su archivo de módulo debe tener estos:

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)

Registro simple de archivos html:

<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>

Ahora su archivo registration.ts debería ser así:

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.
  }
}

Para manejar estos datos en el lado del servidor use este enlace: Cómo publicar un objeto json con Http.post (Angular 2) (lado del servidor php) . Creo que esto es más que suficiente.