Formes angulaires FormGroupDirective – GeeksforGeeks

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Dans cet article, nous allons voir ce qu’est FormGroupDirective dans Angular 10 et comment l’utiliser.

FormGroupDirective est utilisé pour lier un FormGroup existant à un élément DOM.

Syntaxe:

<form [FormGroup] ="name">

Exporté depuis :

Sélecteurs :

Approcher:

  • Créer l’application Angular à utiliser
  • Dans app.component.ts, créez un objet contenant une valeur pour l’entrée.
  • Dans app.component.html, utilisez FormGroup pour obtenir des valeurs.
  • Servez l’application angulaire en utilisant ng serve pour voir la sortie.

Exemple 1:

app.component.ts

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

  import { FormGroup, FormControl, FormArray } from '@angular/forms'

  @Component({

    selector: 'app-root',

    templateUrl: './app.component.html',

    StyleUrl : [ './app.component.css' ]

  })

  export class AppComponent  {

    form = new FormGroup({

      name: new FormControl()

    });

 

    get name(): any {

      return this.form.get('name');

    }

   

    onSubmit(): void {

      console.log(this.form.value); 

    }

   

  }

app.component.html

<br>

<form [formGroup]="form" (ngSubmit)="onSubmit()">

  <input formControlName="name" placeholder="Name">

  <br>

  <button type='submit'>Submit</button>

  <br>

  <br>

</form>

Production:

ngformgrpdir

Référence: https://angular.io/api/forms/FormGroupDirective

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *