#

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 {

        margin4px;

        padding4px;

        /* background-color: #eeeeee; */

        width600px;

    }

 

    p {

        colorblue;

    }

 

    ::ng-deep .mat-focused .mat-form-field-label {

        /*change color of label*/

        colorrgb(253250244!important;

    }

 

    ::ng-deep.mat-form-field-underline {

        /*change color of underline*/

        background-colorgreen !important;

    }

 

    ::ng-deep.mat-form-field-ripple {

        /*change color of underline when focused*/

        background-colorgreen !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>&nbsp;

        <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 { ComponentViewChildOnInitOnDestroy } from '@angular/core';

import { ActivatedRouteRouter } 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 { mergeof as observableOf } from 'rxjs';

import { catchErrorstartWithswitchMap } from 'rxjs/operators';

 

@Component({

  selector: 'app-edit-timerecord',

  templateUrl: './edit-timerecord.component.html',

  styleUrls: ['./edit-timerecord.component.css']

})

 

export class EditTimerecordComponent implements OnInitOnDestroy {

  //*get form reference in .html

  @ViewChild('f', { static: false }) inputFormNgForm;

 

  //*data

  public timeRecordTimeRecord;

  

  //--< mapping >--

  idtimeRecordnumber//*map to idtimeRecord

  iduserguidstring;

  projectstring;

  detailsstring;

  dtStartDate;   //*2021-01-20T08:00:00 Json, ISO Dates (Date-Time)

  dtEndeDate;

  sTimeStartString

  sTimeEndString;

  dtEditDate

  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 timerecordsServiceTimerecordsService,

    private routeActivatedRoute,  //*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.sTimeStartsHoursMinutes_Start;

 

    let sDateTime_End : string =this.dtEnde.toString();

    let sHoursMinutes_End:string = sDateTime_End.substr(sDateTime_End.indexOf("T")+1,5);

    this.sTimeEndsHoursMinutes_End;

    

    //</ convert iso Date >

 

    this.idtimeRecord=this.timeRecord.idtimeRecord;

  }

 

  save({ valuevalid }) {

    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 { MatSidenavModulefrom '@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 { }

 

 

 

Mobile

.