Menu
I'm currently working on a project where I need the user to fill out an angular form and then send it to a route in my backend to process the data. The backend is in ASP.NET and I already have a functional form in HTML that's working :
<body>
<h2 style="text-align:center">Push notification test</h2>
<form style="align-content:center" action="SendPushNotification" method="post">
<div>
<fieldset>
<legend> Informations </legend>
<label> Notification name : </label>
<input name="notificationName" id="notificationName" type="text" value="Bonjour" />
</fieldset>
<br />
<fieldset>
<label> Server Key : </label>
<input name="serverKey" id="serverKey" type="text" value="AAAAuTv1XVQ:APA91bHsgOmK-quki_rRehRhON9c_y9INocubgru6_jPePiE_Zt5iVXfJ-XD43RubfIY5WEoIpFEyziByfeNRsoIlpeNi693bGZYfjjb7ULDx23sRzHQcYLCgl7y3vn-K9X8hrmQhw1oY6lSTml2aqzoi8GGBIeZYA" />
</fieldset>
<br />
<fieldset>
<label> To mobile user : </label>
<select name="selectMobile" id="selectMobile" style="width:400px" name="mobileUser">
<option>Select Mobile User</option>
</select>
</fieldset>
<br />
<fieldset>
<label> To topic : </label>
<input name="topicName" id="topicName" type="text" value="news" />
</fieldset>
<br />
<fieldset>
<label> Message : </label>
<textarea name="notificationMessage" id="notificationMessage" cols="40" rows="5">Comment tu vas toi ?</textarea>
</fieldset>
<br />
<input type="submit" value="Send Notification" />
</div>
</form>
HTML Rendering
So I'm trying to do the same thing in Angular 6 with this result but when I want to assign the route "SendNotification" to my "Submit" button I get the following error :
Angular Rendering + Error
notification-form.component.html
<button [routerLink]="['SendNotification']" type="submit" class="btn btn-success" [disabled]="!notificationForm.form.valid">Submit</button>
The error occurs as soon as I add [routerLink] or add a private constructor :
constructor(private router: Router) {}
to my notification-form.component.ts.
I have already tried several solutions like adding HttpClientModule to my app.module.ts but nothing works.
Is there something I'm doing wrong?
Thank you in advance for your time!
UPDATE:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
import { RouterModule } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NotificationFormComponent } from './notification-form/notification-form.component';
@NgModule({
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
RouterModule
],
declarations: [
AppComponent,
NotificationFormComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
222
First import RouteModule in app.module.ts
import { RouterModule, Routes } from '@angular/router';
And use it like below: (You only import RouterModule but need to add forRoot([]) also.)
imports: [
RouterModule.forRoot([])
// other imports here
]
If you have any routes use them like below. This sample code from Angular DOC
const appRoutes: Routes = [
{ path: 'crisis-center', component: CrisisListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes,
{ enableTracing: true } // <-- debugging purposes only
)
// other imports here
],
...
})
export class AppModule { }
And in your main Component (app.component.html) add <router-outlet></router-outlet>
Hope this will help you!
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
