Header Ads Widget

Ticker

6/recent/ticker-posts

Selector de fecha de material angular 10/9, entrada, casilla de verificación, botón de opción y selección

 En este tutorial, aprenderá a usar Angular Material para diseñar formularios en su aplicación web Angular 10. Usaremos componentes comunes como campos de formulario, entrada, etiqueta, selectores de fecha, botones de opción y selección.

En particular, veremos cómo usar formularios y selectores de fechas con ejemplos.

Usaremos los siguientes componentes de Material en este tutorial para diseñar un formulario y sus campos:

  • El componente de material de la tarjeta a través de <mat-card>,
  • El componente Material del campo de formulario a través de <mat-form-field>,
  • El componente CheckBox Material a través de <mat-checkbox>,
  • El componente Material de entrada a través de <input matInput><textarea matInput>,
  • El componente Material de etiqueta a través de <mat-label>,
  • El componente Selector de fecha a través de <mat-datepicker>,
  • El componente Material del botón de radio a través de <mat-radio-button,
  • El componente Seleccionar material mediante <mat-select>.

Estos son los campos más necesarios en los formularios.

Suponemos que tiene Angular CLI 10 instalado y ha creado un proyecto. Ambas tareas se pueden realizar fácilmente desde su terminal usando estos dos comandos:

$ npm install @angular/cli -g # Install Angular CLI globally on your system
$ ng new mat-form-example # Create a project named mat-form-example 

Nota : Necesita tener versiones recientes de Node.js y NPM instaladas en su sistema.

Configuración de material angular en su proyecto Angular 10

Después de configurar un proyecto de Angular 10 de ejemplo , debe importar y configurar Angular Material en su proyecto e importar los módulos de Material individuales que desea usar usando la declaración de importación de TypeScript .

Puedes configurar Angular Material en tu proyecto de Angular 10 usando el ng addcomando:

$ cd mat-form-example
$ ng add @angular/material

Luego debe configurar o deshabilitar las animaciones .

Importación de los módulos de material de Angular 10

A continuación, debe importar los módulos de Material individuales en su módulo de aplicación principal para incluir los componentes necesarios. Abra el src/app/app.module.tsarchivo y agregue las siguientes importaciones:

import {MatInputModule} from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';

A continuación, debe agregar estos módulos en la imports matriz del módulo de aplicación:

imports: [ /*...*/, MatInputModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatCheckboxModule, MatDatepickerModule, MatRadioModule, MatSelectModule],

El MatCardModulecontiene el componente de la tarjeta del material que será utilizado para envolver el formulario.

Eso es todo, ahora puede usar estos componentes de Material en su proyecto.

Crear el componente Angular 10 y darle estilo con material angular

En este tutorial, crearemos un formulario simple para crear contactos.

Creemos un componente Angular donde agregaremos nuestro formulario. Regrese a su terminal y ejecute el siguiente comando:

$ ng generate component contact-create

Esto generará un ContactCreateComponentcomponente y lo agregará al módulo de la aplicación.

Agregar un contenedor de tarjeta de material

Abra el src/app/contact-create/contact-create.component.htmlarchivo y agregue el componente Tarjeta antes de usarlo como contenedor para nuestro formulario:

<mat-card>
<mat-card-header>
    <mat-card-title>Create Contact Form</mat-card-title>
</mat-card-header>

    <mat-card-content>
    <!-- put the form here -->
    </mat-card-content>
    <mat-card-actions>
    <!-- put buttons here -->
    </mat-card-actions>
</mat-card>

En el área de contenido de la tarjeta, agregue este formulario HTML:

<form>
</form>

Agregar un campo de entrada de material

En su formulario, agregue un campo de formulario Material con una etiqueta y elementos de entrada:

        <mat-form-field>
            <mat-label>Contact Name</mat-label>
            <input  matInput  placeholder="Contact Name" [(ngModel)]="contactName"  name="contactName"  required>
        </mat-form-field>

El <mat-form-field>actúa como un contenedor para los campos del formulario.

Agregar un campo de área de texto de material

A continuación, creemos un campo de formulario con una etiqueta y un área de texto para ingresar la dirección de contacto:

        <mat-form-field>
            <mat-label>Contact Address</mat-label>
            <textarea [(ngModel)]="contactAddress"  matInput></textarea>
        </mat-form-field>

Agregamos la matInputdirectiva al área de texto para convertirla en un componente Material.

Usamos <mat-label>para agregar etiquetas, <input matInput />para campos de entrada y <textarea matInput>para campos de área de texto.

Agregar una casilla de verificación de material

A continuación, agreguemos una casilla de verificación:

    <mat-checkbox [checked]="isDeleted">Is deleted?</mat-checkbox>

Agregar un selector de fecha de material

A continuación, agreguemos un campo de entrada de fecha y un selector de fecha:

    <mat-form-field>
        <mat-label>Date</mat-label>
        <input  [value]="date.value" matInput [matDatepicker]="myPicker"  placeholder="date">
        <mat-datepicker-toggle  matSuffix [for]="myPicker"></mat-datepicker-toggle>
        <mat-datepicker #myPicker></mat-datepicker>
    </mat-form-field>

El selector de fecha permite a los usuarios ingresar una fecha a través de la entrada de texto o eligiendo una fecha del calendario. Se compone de varios componentes y directivas que trabajan juntos. Leer más información

Agregar un grupo de radio de material y botones

A continuación, agreguemos algunos botones de opción para especificar el género de nuestro contacto:

    <mat-label>Gender</mat-label>
    <mat-radio-group [(value)]="contactGender">
        <mat-radio-button  value="male">Male</mat-radio-button>
        <mat-radio-button  value="female">Female</mat-radio-button>
    </mat-radio-group>

Vinculamos la contactGendervariable al del valuegrupo de radio.

Agregar un campo de selección de material

Finalmente, agreguemos el último campo que es un campo Seleccionar:

    <mat-form-field>
        <mat-label>Source of Contact</mat-label>
            <mat-select [(value)]="contactSource" placeholder="Source of contact">
            <mat-option value="email">Email</mat-option>
            <mat-option value="website">Website</mat-option>
            <mat-option value="direct">Direct</mat-option>
        </mat-select>
    </mat-form-field>

A continuación, todo lo que necesitamos agregar a nuestro formulario es un botón para guardar el contacto:

<mat-card-actions>
    <button  mat-raised-button (click)="saveContact()"  color="primary">Save Contact</button>
</mat-card-actions>

Agregar variables al componente

En src/app/contact-create/contact-create.component.tsañadir estas variables:

contactName:  string  =  "";
contactAddress:  string  =  "";
contactSource:  string  =  "direct";
contactGender:  string  =  "male";
isDeleted  :  boolean  =  false;
date  =  new  FormControl(new  Date());

public  saveCustomer(){
    /* Typically this method will be used to send the contact form to a server to save it*/
}

Conclusión

Angular Material proporciona varios componentes para crear formularios de interfaz de usuario profesionales con componentes individuales para campos comunes.

Usamos campos de formulario, entrada, etiqueta, selectores de fecha, botones de radio y selección.

En este tutorial, ha visto cómo puede crear un formulario simple, con un selector de fecha, utilizando Angular 10 Material.

Publicar un comentario

0 Comentarios