Data binding con ngModel
Contenido del curso
Data binding con ngModel
Contenido del curso
Rony Porraz Vargas
José Pablo Jiménez Cucanán
KEVIN DAVID GARCIA VALDES
Andres Felipe Pinto Becerra
Bryan Smith Patiño Lesmes
Luis Angel Díaz Sánchez
Jimmy Buriticá Londoño
Orlando Daniel Montes Antonio
Nicolas Molina
Profesor
Aaron Paredes Cabrera
Fernando Molano Castrillón
Daniela Stornelli
Alfonso Gómez Seca
Segundo Juan
Daniela Stornelli
Juan David Saldarriaga Ospina
Diego Fernando Caviedes Camaho
Gisela Angela Cristaldo
German Pinilla
Platzi Team
Edinson Colonia Paez
Ricardo Arquimedes Castro Quintero
Daniel Meza
Lindsay Rodríguez
Ayoze Rodríguez Abreu
Lindsay Rodríguez
Jose Herrera
JOSE MARIO ANGEL GARCIA SANDOVAL
Gisela Angela Cristaldo
Jasson Josué Medina Calderón
Diego Fernando Caviedes Camaho
Nicolas Molina
ProfesorDiego Fernando Caviedes Camaho
Christell Romo
PiPe Ramirez
El banano viene del curso TypeScript con Angular por Belatrix
uy!!, tendre que ver ese curso antes que este?
Recomiendo la siguiente lectura para complementar, personalmente me ha servido mucho cuando inicié hace unos meses a estudiar y trabajar con Angular. Enlace
No está disponible :(
Muy buen aporte, gracias
Apenas iniciando en Angular y ya voy viendo lo maravilloso que es este Framework.
Entonces practicamente ya ni es necesaria la función changeName()?
Exacto ya no sería necesaria porque el ngModel hace todo el trabajo que antes hacíamos manualmente.
Que potente ngModel :) 💚
Por Dios santo que delicia es Angular. Por qué carajos no me había decidido antes a aprender esto? 🤯
Cómo sabe el [( ngModel )] que la función es keyup?
Tengo un problema. Ya importé FormsModule y lo agregué a los imports en app.module.ts pero cuando quiero usar el ngModel me aparece el error:
Can't bind to 'ngModel' since it isn't a known property of 'input'.
Tengo el mismo problema, pudiste solucionarlo?
me pasa lo mismo... y la unica solucion que se encuentra en internet es esa, que nos habremos olvidado de importarlo o agregaro a los imports, pero hice ambos...
Ahora es posible tener componentes independientes, esto permite que cada componente maneje sus dependencias de servicios, módulos u otros componentes internamente sin hacer importaciones de forma incremental como lo menciona Nico, agregando en el decorador @Component la propiedad standalone: true y la propiedad imports en la cuál se agregarían todas las importaciones que necesita el componente
import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; @Component({ standalone: true, imports: [ FormsModule ], selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], })
Esta parte es importante para entender los estados y ciclo de vida de angular
✨Tips de [(ngModel)] =”somValue”
++DATA BINDING CON NGMODEL++
El data binding, se refiere a una fusion entre escuchar un evento (event binding) y definir una propiedad(property binding), es la union de las dos lo que es conocido como enlace de doble via.
En angular tenemos el ngModel el cual nos servira para los inputs. Gracias a sus caracteristicas, el ngModel siempre esta pendiente del estado del input, si el campo es valido o no, la interaccion del input con el usuario y ademas, sincroniaza su valor. Ya que le daremos provecho a esta utilidad, lo mas indicado es usar uno de los paquetes de toda la gran plataforma de Angular y es el Angular Forms.
Angular forms lo podemos importar de la dependencia ++@angular/forms++ y es uno de los paquetes mas usados ya que nos ayudara a construir formularios y sus propiedades.
[(ngModel)] = "Some value";
<input type="text" #inputName="ngModel" [(ngModel)]="person.name"><br> <h3><strong>{{ person?.name }}</strong></h3>
Una anotacion para el equipo de Pltzi, el curso que dice el profe no esta dentro de la ruta de Angular Frontend, seria bueno depronto agregarlo.
Los nuevos paquetes a instalar siempre se deben hacer en el app.module.ts. y si lo importas debe quedar en el imports para que todos los modulos lo puedan usar.
interesante el concepto de incremental, no la había escuchado de esa manera, al ir agregando los paquetes que necesitamos
Esto es interesante, pero aún mas RXJS con los formularios reactivos 🔥
Me sucede algo extraño, y es que al colocar el valor 9 en el input de edad, me aparece que es válido, pero al profesor no. ¿Alguien sabe a qué se debe eso? :,(
Si compartes el código podremos ayudarte
El código HTML sería este:
<h2>NgModel</h2> <p>Nombre {{person.name}} </p> <input type="text" required #nameInput="ngModel" [(ngModel)]="person.name"> <p>Valid: {{ nameInput.valid }} </p> <p>Age {{person.age}}</p> <input type="number" max="18" min="10" required #ageInput="ngModel" [(ngModel)]="person.age"> <p>Valid: {{ ageInput.valid }} </p> <hr/> <h2>Eventos</h2> <button [disabled]="btnDisabled">Enviar</button> <button (click)="toggleButton()">Toggle button</button> <p>Edad {{person.age}} </p> <button (click)="increaseAge()">Age ++</button> <div class="box" (scroll)="onScroll($event)"> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et alias repellat praesentium veniam, molestiae odio porro eius reiciendis suscipit at magnam non. Autem nesciunt molestias at nihil mollitia fugiat distinctio. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et alias repellat praesentium veniam, molestiae odio porro eius reiciendis suscipit at magnam non. Autem nesciunt molestias at nihil mollitia fugiat distinctio. </p> </div> <p>Nombre {{person.name}} </p> <input type="text" [value]="person.name" (keyup)="changeName($event)"> <hr/> <h2>Propiedades</h2> <button [disabled]="btnDisabled">Enviar</button> <input type="text" [value]="person.name" /> <progress max="100" [value]="person.age"></progress> <img width="100" [src]="person.avatar"> <hr/> <h2>Hola mundo</h2> <h3>{{ 'Hola mundo'.repeat(5) }}</h3> <p>3 + 3 = {{3 + 3}}</p> <h4>Hola, soy {{ name }} y tengo {{ age }}</h4> <img src={{img}} alt="image">
Al parecer no se me reconoce el min y max. Solo me cambia el true por false, validandando el required, pero el min y max los ignora. Alguien sabe por qué? Gracias!!
Hola José ensañanos tu codigo
Hola, creo que este link te puede ayudar a solucionar. Forms
¿Cómo sabe el [(NgModel)] que el evento es un 'keyUp'?
para que es el #nameInput = "ngMOel"
Hola, es la manera de asignar a nuestra variable template nameInput el ngModel del input por eso queda así #nameInput="ngModel" es para con esto poder acceder a todos sus propiedades y ventajas del ngModel como por ejemplo hacer saber si es un campo inválido con esto nameInput.valid
muy bien explicado muchas gracias
No tengo el archivo app.module.ts al crearlo e importar tengo error
No tengo éxito, me da error en AppComponent
error 1.-Component AppComponent is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?(-996008)
error 2.-The AppComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array. Use the bootstrapApplication function for bootstrap instead.(-99600
Mira mi comentario.
