Consideremos un ejemplo en el que estamos construyendo el Formulario de Empleados.
Nombre de archivo: person.ts
12345678910exportclassPerson{constructor(public id:number,public firstName:string,public award:string,public address?:string){}}tipografía
La dirección es opcional, por lo que el constructor le permite omitirla; anote el signo de interrogación (?) en «dirección?».
Puedes crear una nueva persona así:
1234let myPerson =newPerson(42,$0027Raj$0027,$0027ABC$0027,$0027Banglore$0027);console.log($0027Mi nombre de persona es $0027+ myPerson.name);
tipografía
En el siguiente código de ejemplo, veremos cómo crear un componente de formulario.
Nombre de archivo: person-form.component.ts
1234567891011121314151617181920212223import{Componente}de$0027@angular/núcleo$0027;import{Héroe}de$0027../persona$0027;@Componente({ selector:$0027app-person-form$0027, templateUrl:$0027./person-form.component.html$0027, styleUrls:[$0027. /person-form.component.css$0027]})exportclassPersonFormComponent{ awards =[$0027ABC$0027,$0027XYZ$0027,$0027Marvel$0027]; model =newPerson(18,$0027Raj$0027,this.awards[0],$0027Banglore$0027); submitted =false;onSubmit(){this.submitted=true;}// TODO: Eliminar esto cuando no hagamos el diagnóstico (){regresar a JSON.stringify(this.model);}}tipografía
El código importa la biblioteca del núcleo angular y el modelo de persona que acabas de crear. El valor del selector @Component de «app-person-form» significa que puedes soltar este formulario en una plantilla padre con una etiqueta. La propiedad templateUrl apunta a un archivo separado para la plantilla HTML. Usted definió datos ficticios para el modelo y los premios, como corresponde a una demo.
Necesitamos añadir el FormsModule a la matriz de importaciones para el módulo de aplicación antes de poder usar los formularios. En él, identificas los módulos externos que usarás en la aplicación y declaras los componentes que pertenecen a este módulo, como el PersonFormComponent. Sustituye el contenido de app.component.html por .