Matériau angulaire 7 - Champ de forme

le <mat-form-field>, une directive angulaire, est utilisée pour créer un wrapper sur les composants angulaires et est utilisée pour appliquer des styles de texte tels que soulignement, gras, indices, etc.

Le composant angulaire suivant peut être utilisé dans <mat-form-field>.

  • <entrée matNativeControl>

  • <textarea matNativeControl>

  • <sélectionnez matNativeControl>

  • <mat-select>

  • <mat-chip-list>

Dans ce chapitre, nous présenterons la configuration requise pour utiliser un contrôle mat-form-field dans Angular Material.

Créer une application angulaire

Suivez les étapes suivantes pour mettre à jour l'application Angular que nous avons créée dans Angular 6 - Chapitre Configuration du projet -

Étape La description
1 Créez un projet avec un nom materialApp comme expliqué dans le chapitre Angular 6 - Configuration du projet .
2 Modifiez app.module.ts , app.component.ts , app.component.css et app.component.html comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatInputModule,MatOptionModule, MatSelectModule, MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatInputModule,MatOptionModule, MatSelectModule, MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Voici le contenu du fichier CSS modifié app.component.css.

.tp-container {
   display: flex;
   flex-direction: column;
}
.tp-container > * {
   width: 100%;
}

Voici le contenu du fichier hôte HTML modifié app.component.html.

<div class = "tp-container">
   <mat-form-field appearance = "standard">
      <input matInput placeholder = "Input">
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
      <mat-hint>Sample Hint</mat-hint>
   </mat-form-field>
   <mat-form-field appearance = "fill">
      <textarea matInput placeholder = "Textarea"></textarea>
   </mat-form-field>
   <mat-form-field appearance = "outline">
      <mat-select placeholder = "Select">
         <mat-option value = "A">A</mat-option>
         <mat-option value = "B">B</mat-option>
         <mat-option value = "C">C</mat-option>      
      </mat-select>
   </mat-form-field>
</div>

Résultat

Vérifiez le résultat.

Détails

  • Pour commencer, nous avons créé un champ de formulaire à l'aide du wrapper mat-form-field. Nous avons changé l'apparence du champ de formulaire en utilisant l'attribut d'apparence.

  • Ensuite, un contrôle de formulaire est ajouté au champ de formulaire.