I am very new to Angular and I am creating a full stack MEAN stack. I need some advice on a problem I'm facing. I want to create a form, 'fa-daform.component.html,' that gives a brief description, author and date that stores to a database with a randomly generated ID. I want such that when I hit submit/a create form button that it routes to a new page, 'detailed-daform.component.html,' for a more detailed form, but with the ID of the data entered for the brief description, author and date for future use.
Brief Description HTML file: fa-daform.component.html:
<div>
<mat-toolbar class = "menu" color="primary">
<div class="centerNavBar">
<a mat-button href="fa-dashboard">Back</a>
<span class="headSpacer">Damage Assessment Tool</span>
<a mat-button href="">Logout</a>
</div>
</mat-toolbar>
</div>
<div>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<div>
<a mat-button href="fa-dashboard">Dashboard</a>
</div>
<div>
<a mat-button href="fa-daform">Report</a>
</div>
<div>
<a mat-button href="fa-search">Stored Data</a>
</div>
</mat-sidenav>
<mat-sidenav-content>
<div class="sect">
<h1>Damage Assessment Report</h1>
</div>
<mat-card>
<mat-card-header>Create report:</mat-card-header>
<br><br>
<mat-card-content>
<div>
<mat-form-field>
<mat-label>Report Description</mat-label>
<input
#DescOfReportInput
placeholder="Description of Report"
matInput type= "string"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Author</mat-label>
<input
#AuthorInput
placeholder="Author"
matInput type= "string"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label></mat-label>
<input
#DateInput
placeholder="----/--/--"
matInput type= "Date"
required>
</mat-form-field>
<br>
</div>
<div>
<button mat-raised-button
type="submit"
(click)="createDamageAssessmentReport(DescOfReportInput.value, AuthorInput.value, DateInput.value)"
color="primary" [routerLink]='['/detailed-daform',detailedDAFormID._id]'>Create</button>
</div>
</mat-card-content>
</mat-card>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
Brief Description typescript file: fa-daform.component.ts:
import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
@Component({
selector: 'app-fa-daform',
templateUrl: './fa-daform.component.html',
styleUrls: ['./fa-daform.component.css']
})
export class FADAFormComponent implements OnInit {
constructor(private damageAssessmentReportService : DamageAssessmentReportService) { }
//assessmentDescription: string, author: string, reportDateTime: Date
createNewDAReport(){
this.damageAssessmentReportService.createDAReport("New Report","Dillon", new Date(2020, 9, 10)).subscribe((response : any)=>{
console.log(response);
})
}
createDamageAssessmentReport(assessmentDescription: string, author: string, reportDateString: string){
const reportDateTime = new Date(reportDateString); // Here you should have your date ready to be used as you wish
this.damageAssessmentReportService.createDAReport(assessmentDescription,author, reportDateTime).subscribe((response : any)=>{
console.log(response);
//navigate to /damageAssessments/damageAssessments._id
})
}
ngOnInit(): void {
}
}
Detailed form HTML file: detailed-daform.component.html:
<p>detailed-daform works!</p>
Detailed form typescript file: detailed-daform.component.ts:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
@Component({
selector: 'app-detailed-daform',
templateUrl: './detailed-daform.component.html',
styleUrls: ['./detailed-daform.component.css']
})
export class DetailedDaformComponent implements OnInit {
damageAssessments: any;
constructor(private damageAssessmentReportService: DamageAssessmentReportService, private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(
(params: Params)=>{
console.log(params);
}
)
this.damageAssessmentReportService.getDAReport().subscribe((damageAssessments: any)=> {
console.log(damageAssessments);
});
}
}
routing module file: app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DetailedDaformComponent } from './pages/detailed-daform/detailed-daform.component';
import { FADAFormComponent } from './pages/fa-daform/fa-daform.component';
import { FADashbooardComponent } from './pages/fa-dashbooard/fa-dashbooard.component';
import { FASearchComponent } from './pages/fa-search/fa-search.component';
import { LandingComponent } from './pages/landing/landing.component';
const routes: Routes = [
{path: "" , redirectTo: "landing", pathMatch: 'full'},
{path: "detailed-daform" , redirectTo: "detailed-daforms", pathMatch: 'full'},
{path: "landing" , component: LandingComponent},
{path: "fa-dashboard" , component: FADashbooardComponent},
{path: "fa-daform" , component: FADAFormComponent},
{path: "fa-search" , component: FASearchComponent},
{path: "detailed-daforms" , component: DetailedDaformComponent},
{path: "detailed-daforms/:detailedDAFormId" , component: DetailedDaformComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I tried when hitting create button but this error appears " Property 'detailedDAFormID' does not exist on type 'FADAFormComponent'."
The project github it it'll help: [https://github.com/DillonRampersad/Damage_Assessment_Tool]
Im not quite sure how to go about it, I was looking into activated routes but I'm so confused. Any help would be appreciated
you can try using Router
<button mat-raised-button type="submit"
(click)="createDamageAssessmentReport(DescOfReportInput.value, AuthorInput.value, DateInput.value)" color="primary" >Create</button>
Brief Description typescript file: fa-daform.component.ts:
import { Component, OnInit } from '@angular/core';
import { DamageAssessmentReportService } from 'src/app/damage-assessment-report.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-fa-daform',
templateUrl: './fa-daform.component.html',
styleUrls: ['./fa-daform.component.css']
})
export class FADAFormComponent implements OnInit {
constructor(private damageAssessmentReportService : DamageAssessmentReportService, private router: Router) { }
//assessmentDescription: string, author: string, reportDateTime: Date
createNewDAReport(){
this.damageAssessmentReportService.createDAReport("New Report","Dillon", new Date(2020, 9, 10)).subscribe((response : any)=>{
console.log(response);
})
}
createDamageAssessmentReport(assessmentDescription: string, author: string, reportDateString: string){
const reportDateTime = new Date(reportDateString); // Here you should have your date ready to be used as you wish
this.damageAssessmentReportService.createDAReport(assessmentDescription,author, reportDateTime).subscribe((damageAssessments : any)=>{
console.log(damageAssessments);
//navigate to /damageAssessments/damageAssessments._id
this.router.navigateByUrl(`damageAssessments/${damageAssessments._id}`)
})
}
ngOnInit(): void {
}
}