Ako vytvoriť základný formulár HTML odosielať prácu aj v prostredí 4 uhla? - html, úhlové, formy

Som nováčkářka v službe Angular 2+ a majú problémy v základnej forme. Hoci používam Angular, chcem vedieť, ako môžem jednoducho odoslať formulár pomocou tlačidla Odoslať. Triviálny spôsob podania.

<form action="/api/profile/me" method="post">
<input type="submit"/>
</form>

Aj po kliknutí na tlačidlo Odoslať nemôžem vidieť prehliadač, ktorý sa pokúša komunikovať so serverom.

Ako môžem urobiť uhlové, aby som nepočúval tieto konkrétne udalosti?

Ďakujem vám všetkým.

odpovede:

0 pre odpoveď č. 1

Existujú spôsoby, ako vytvoriť formulár v uhle

môžete ísť s reaktívnymi formulármi a nasledovať toto pekné tuttorial

https://code.tutsplus.com/tutorials/introduction-to-forms-in-angular-4-reactive-forms--cms-29787

    <form novalidate (ngSubmit)="onSubmit(profile)" [formGroup]="profile">
<input type="email" placeholder="E-mail" formControlName="email" class="form-control">
// add your coustome message here
</form>

a v súbore komponentov ts

 this.profile = this.fb.group({
email: [null, [Validators.required]]
})

---

0 pre odpoveď č. 2

Môžete sa pokúsiť použiť reaktívne formuláre.

Najprv pridajte ReactiveFormsModule do app.module.ts.

import { ReactiveFormsModule, FormsModule } from "@angular/forms";
@NgModule({
imports: [
CommonModule,
LoginRoutingModule,
FormsModule,
ReactiveFormsModule
],

Potom pridajte značku formulára do app.componenet.html.

<form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)">
<input type="text" formControlName="email" placeholder="Email">
<button type="submit" [disabled]="!rForm.valid">LOGIN</button>
</form>

a posledný súbor app.componenet.ts by mal vyzerať takto:

import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from "@angular/forms";
export class AppComponent implements OnInit {
rForm: FormGroup;
constructor(private fb: FormBuilder){
this.rForm = fb.group({
"email": [null, Validators.compose([Validators.required, Validators.email])] });
}
addPost(post) {
console.log(post);
}
}

---