Material angular 7 - Entrada

los <mat-input>, una directiva angular, se usa para que los elementos <input> y <textarea> funcionen bajo <mat-form-field>.

Los siguientes tipos de entrada se pueden utilizar dentro <mat-input>.

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • password
  • search
  • tel
  • text
  • time
  • url
  • week

En este capítulo, mostraremos la configuración requerida para usar un control de entrada mat en Angular Material.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 - Capítulo Configuración del proyecto -

Paso Descripción
1 Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 - Configuración del proyecto .
2 Modifique app.module.ts , app.component.ts , app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3 Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

A continuación se muestra el contenido del archivo CSS modificado app.component.css.

.tp-form {
   min-width: 150px;
   max-width: 500px;
   width: 100%;
}
.tp-full-width {
   width: 100%;
}

A continuación se muestra el contenido del archivo ts modificado app.component.ts.

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
import {Validators} from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   emailFormControl = new FormControl('', [
      Validators.required,
      Validators.email,
  ]);
}

A continuación se muestra el contenido del archivo de host HTML modificado app.component.html.

<form class = "tp-form">
   <mat-form-field class = "tp-full-width">
      <input matInput placeholder = "Favorite Food" value = "Pasta">
   </mat-form-field>
   <mat-form-field class = "tp-full-width">
      <textarea matInput placeholder = "Enter your comment"></textarea>
   </mat-form-field>
   <mat-form-field class = "tp-full-width">
      <input matInput placeholder = "Email" [formControl] = "emailFormControl">
      <mat-error *ngIf = "emailFormControl.hasError('email') 
         && !emailFormControl.hasError('required')">
         Please enter a valid email address
      </mat-error>
      <mat-error *ngIf = "emailFormControl.hasError('required')">
         Email is <strong>required</strong>
      </mat-error>
   </mat-form-field>
</form>

Resultado

Verifique el resultado.

Detalles

  • Como primero, hemos creado un campo de formulario utilizando el contenedor mat-form-field.

  • Luego, se agrega un control de formulario al campo de formulario usando input y el atributo matInput.