Saltar al contenido

manejo tutorialJan, 8thIn este tutorial forma angular, vamos a aprender acerca de la manera de manejar las formas …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo manejar las formas en ángulo mediante el uso de un enfoque basado en plantillas.

En las formas basados ​​en plantillas que utilizan Directiva ngModel que crea una de dos vías de unión entre el elemento de entrada y la propiedad de modo que pueda actualizar correctamente los elementos de formulario cuando ocurre un cambio de datos. Para uso

Directiva ngModel dentro de nuestros componentes, en primer lugar, tenemos que configurar nuestros app.module.ts fileby importar un FormsModule de @ angular / paquete de formas y lo añadió a las importaciones matriz. de

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent,
ChildComponent
],
imports: [
BrowserModule, FormsModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

elemento de entrada

Veamos un ejemplo de cómo manejar los datos de los elementos de entrada mediante el uso de Directiva ngModel.


En el código anterior, hemos añadido un elemento de entrada con la directiva ngModel que está unido a thename propiedad para que valor de elemento de entrada está en sincronía con la propiedad de nombre. de

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name: string;
constructor() { }

}

Los botones de radio

Veamos un ejemplo de cómo manejar los botones de selección de datos. botones de radio

ya que necesitamos para obligar a la misma propiedad con dos botones de radio como en la de abajo ejemplo hemos añadido una directiva ngModel con la propiedad de género a la vez los botones de radio masculinos y femeninos.




Gender: {{gender}}

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

name: string;
gender: string;
constructor() { }
}

Casilla

solo ejemplo casilla

En el código anterior, hemos añadido una directiva [(ngModel)] = “suscribirse” a la casilla de verificación para que cuando se comprueba un usuario al suscribirse valor de la propiedad es cierto, para marcar el valor es falsa.

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

name: string;
gender: string;
subscribe: boolean;
constructor() {

}
}

múltiples casillas ejemplo

En algunos casos, tenemos que manejar varias casillas de verificación como elegir juegos favoritos o pasatiempos en estos casos es necesario crear un grupo de propiedades y les asignamos a cada casilla. Véase la

Choose your favorite games

Cricket :{{games.cricket}}

Football: {{games.football}}

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {

name: string;
gender: string;
subscribe: boolean;
games = { cricket: null, football: null, };
constructor() {

}
}

Textarea ejemplo elemento