La, <mat-input> una Directiva Angular, se utiliza para y los elementos a trabajar bajo .
Los siguientes tipos de entrada se pueden utilizar dentro de ….
- color
- fecha
- datetime-local
- correo electrónico
- mes
- número
- contraseña
- buscar
- tel
- texto
- hora
- url
- semana
En este capítulo, mostraremos la configuración necesaria para utilizar un control de entrada de malla en Material Angular.
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 –
| Step | Description |
|---|---|
| 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 .
importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatInputModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {NgModule
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatInputModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}
A continuación se muestra el contenido del archivo CSS modificado app.component.css .
.tp-form {
Anchura mínima:150px;
ancho maximo:500px;
width:100%;}.tp-full-width {
ancho:100%;}A continuación se muestra el contenido del archivo ts modificado app.component.ts
importar{Componente}desde@angular/core;importar{FormControl}desde"@angular/forms";importar{Validadores}desde@angular/forms;@Componente({
selector:app-root,
templateUrl:./app.component.html,
styleUrls:[./app.component.css]})exportclassAppComponent{Componente
title =materialApp;
emailFormControl =newFormControl(,[Validators.required,Validators.email,]);}A continuación se muestra el contenido del archivo host HTML modificado app.component.html .
>>matInputInplaceholder="Favorite Food "value="Pasta">>matInputplaceeholder="Escriba su comentario">>matInputplaceholder="Email"[formControl] ="emailFormControl"> *ngIf="emailFormControl.hasError(email) &&! emailFormControl.hasError(required)"> Por favor, introduzca una dirección de correo electrónico válida *ngIf="emailFormControl.hasError(required)"> El correo electrónico es requerido
Resultado
Verifique el resultado.
Detalles
- En primer lugar, hemos creado un campo de formulario utilizando una envoltura de campo mate-formato.
- A continuación, se añade un control de formulario al campo de formulario utilizando los atributos input y matInput.