import { Component } from
'@angular/core'
;
@Component({ selector:
'app-root'
,
<div style=
"text-align: center;"
>
<h1>
{{title}}
</h1>
</div>
<!--using keydown to assign the event to call EnterSubmit method-->
<form
#geeksForm="ngForm"
(keydown)=
"EnterSubmit($event, geeksForm.form)"
(ngSubmit)=
"submitit(geeksForm.form);"
>
<button class=
"btn btn-primary"
[disabled]=
"!geeksForm.valid"
>
Submit
</button>
<input type=
"text"
class=
"form-control"
name=
"geek-name"
ngModel
#geekname="ngModel"
required minlength=
"5"
/>
<div *ngIf=
"geekname.errors.required"
>
The geek name is required
</div>
<div *ngIf=
"geekname.errors.minlength"
>
The geek name should be at least {{
geekname.errors.minlength.requiredLength }} characters long
</div>
<select class=
"form-control"
name=
"geek-type"
ngModel
#geeksField="ngModel"
required>
<option *ngFor=
"let geek of geeks"
[value]=
"geek.id"
>
{{ geek.name }}
</option>
<div *ngIf=
"geeksField.touched && !geeksField.valid"
>
The category is required
</div>
`, styleUrls: [] }) export class AppComponent
{ title =
'Form submission tutorial'
;
public name =
"geek"
; geeks = [ {id: 1, name:
"c++geek"
},
{id: 2, name:
"pythongeek"
}, {id: 3, name:
"javageek"
},
{id: 4, name:
"javascriptgeek"
},
{id: 5, name:
"angulargeek"
} ];
Enter is 13
if
(event.keyCode === 13) {
alert(
'Enter key is pressed, form will be submitted'
);
this
.submitit(form); } }
console.log(form.value);
alert(
"The form was submitted"
); form.reset(); } }
</select>
</form>