Problem:
beim Verwenden von Angular Material wird im Eingabeformular keine Wert angezeigt. In ng serve wird im build auch kein Fehler angezeigt
Lösung:
Man muss MatInputModule in die app.modules.ts einfügen
import { MatInputModule } from '@angular/material/input'; |
url: http://localhost:4200/timerecords/edit/1
richtige Darstellung: beim Öffnen des Formulars werden die Werte angezeigt, die schon im Codebehind in der component.ts vorhanden sind.
Form Output at compontent.html
<div class="alert alert-success" *ngIf="isHttpError"> <p>web http request error</p> </div> <h3 class="page-title">Edit ID: {{ idtimeRecord }} </h3>
<style> div { margin: 4px; padding: 4px; /* background-color: #eeeeee; */ width: 600px; }
p { color: blue; }
::ng-deep .mat-focused .mat-form-field-label { /*change color of label*/ color: rgb(253, 250, 244) !important; }
::ng-deep.mat-form-field-underline { /*change color of underline*/ background-color: green !important; }
::ng-deep.mat-form-field-ripple { /*change color of underline when focused*/ background-color: green !important; ; } </style>
<form novalidate #f="ngForm" style="background-color: darkslategrey;"> <div> <mat-form-field style="width: 300px;"> <mat-label>project</mat-label> <input type="text" name="ctlproject" matInput [(ngModel)]="project" maxlength="50"> </mat-form-field> </div> <div> <mat-form-field style="width: 500px;"> <mat-label>details</mat-label> <input type="text" name="ctldetails" matInput [(ngModel)]="details" maxlength="255"> </mat-form-field> </div> <div> <mat-form-field style="width: 100px;"> <mat-label>Start</mat-label> <input type="time" name="ctlsTimeStart" matInput [(ngModel)]="sTimeStart"> </mat-form-field> <mat-form-field style="width: 100px;"> <mat-label>End</mat-label> <input type="time" name="ctlsTimeStart" matInput [(ngModel)]="sTimeStart"> </mat-form-field> </div>
</form>
|
App.component.ts
import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { NgForm } from '@angular/forms'; import { TimeRecord } from 'src/app/models/timerecords.model'; import { TimerecordsService } from 'src/app/services/timerecords.service'; import { merge, of as observableOf } from 'rxjs'; import { catchError, startWith, switchMap } from 'rxjs/operators';
@Component({ selector: 'app-edit-timerecord', templateUrl: './edit-timerecord.component.html', styleUrls: ['./edit-timerecord.component.css'] })
export class EditTimerecordComponent implements OnInit, OnDestroy { //*get form reference in .html @ViewChild('f', { static: false }) inputForm: NgForm;
//*data public timeRecord: TimeRecord;
//--< mapping >-- idtimeRecord: number; //*map to idtimeRecord iduserguid: string; project: string; details: string; dtStart: Date; //*2021-01-20T08:00:00 Json, ISO Dates (Date-Time) dtEnde: Date; sTimeStart: String; sTimeEnd: String; dtEdit: Date; public value="abc"; //--</ mapping >--
//< variables > public resultsLength = 0; public isLoadingResults = true; public isHttpError = false; //</ variables >
// public color: ThemePalette = 'primary'; // public mode: ProgressSpinnerMode = 'indeterminate';
constructor( public timerecordsService: TimerecordsService, private route: ActivatedRoute, //*get ID ) { }
ngOnInit(): void { //--------< ngOnInit() >-------- this.route.params.subscribe(params => { //< get ID > //*get ID from URL like timerecords/1 this.idtimeRecord = +params['id']; // (+) converts string 'id' to a number console.log(this.idtimeRecord) ; //</ get ID >
//< get Dataset > this.load_DataSource(); //</ get Dataset >
}); //--------</ ngOnInit() >-------- }
ngOnDestroy() { }
//#region //====< functions >==== load_DataSource() { //--------< load_DataSource() >-------- this.isLoadingResults = true; merge() .pipe( startWith({}), switchMap(() => { this.isLoadingResults = true; return this.timerecordsService.get_Dataset(this.idtimeRecord) }), catchError(() => { this.isLoadingResults = true; this.isHttpError = true; return observableOf([]); }) ).subscribe(response => { //--< async response >-- this.timeRecord = response as TimeRecord
//console.log("response=" + response.toString()); this.map_Data(); //*map json to local variables //--</ async response >-- }
); //--------</ load_DataSource() >-------- }
map_Data(){ console.log("timerecord=" + this.timeRecord); this.idtimeRecord=this.timeRecord.idtimeRecord; this.iduserguid=this.timeRecord.iduserguid; this.project=this.timeRecord.project; this.details=this.timeRecord.details; this.dtStart=this.timeRecord.dtStart; this.dtEnde=this.timeRecord.dtEnde; console.log("dtStart=" + this.dtStart.toString()); //< convert iso Date > //*convert Iso-Date-Time to Javascript Date: 2021-01-20T08:00:00 let sDateTime_Start : string =this.dtStart.toString(); let sHoursMinutes_Start:string = sDateTime_Start.substr(sDateTime_Start.indexOf("T")+1,5); this.sTimeStart= sHoursMinutes_Start;
let sDateTime_End : string =this.dtEnde.toString(); let sHoursMinutes_End:string = sDateTime_End.substr(sDateTime_End.indexOf("T")+1,5); this.sTimeEnd= sHoursMinutes_End;
//</ convert iso Date >
this.idtimeRecord=this.timeRecord.idtimeRecord; }
save({ value, valid }) { if (valid) { .. }
//====</ functions >==== //#endregion
}
}
|
In app.modules.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TimerecordsService } from "./services/timerecords.service";
import { AppRoutingModule } from './app-routing.module'; //*Routing in app-routing.module.ts import { AppComponent } from './app.component';
//*Data API import { HttpClientModule } from '@angular/common/http'; //*,
//*Angular/Material import { MatToolbarModule } from '@angular/material/toolbar'; import { MatSidenavModule} from '@angular/material/sidenav'; import { MatListModule } from '@angular/material/list' import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button' import { MatPaginatorModule } from '@angular/material/paginator'; import { MatSortModule } from '@angular/material/sort'; import { MatTableModule } from '@angular/material/table' import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input';
import { NavbarComponent } from './components/navbar/navbar.component'; import { ListTimeRecordsComponent } from './components/timerecords/list-timerecords/list-timerecords.component'; import { EditTimerecordComponent } from './components/timerecords/edit-timerecord/edit-timerecord.component'; import { HomeComponent } from './components/home/home.component'; import { SidenavComponent } from './components/sidenav/sidenav.component';
@NgModule({ declarations: [ AppComponent, NavbarComponent, ListTimeRecordsComponent, EditTimerecordComponent, HomeComponent, SidenavComponent ], imports: [ BrowserModule, HttpClientModule, AppRoutingModule, FormsModule, MatPaginatorModule , MatSortModule , MatTableModule, MatProgressSpinnerModule, MatToolbarModule, MatSidenavModule, MatListModule, MatIconModule, MatButtonModule, MatInputModule, BrowserAnimationsModule , MatFormFieldModule ], providers: [TimerecordsService], bootstrap: [AppComponent] }) export class AppModule { }
|