1

I'm working on Angular project, one of the components is update client component where the client's data gets populated to reactive form for editing purpose, client's info is coming from API,
i used the FormGroup.setvalue for populating the data to the form, all client's data are populated except the Date input field, would you please advice why the Date input field doesn't populate anything, please consider all these information will be resubmitted after editing,

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';
import { Client } from 'src/app/models/Client';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';


@Component({
 selector: 'app-update',
 templateUrl: './update.component.html',
 styleUrls: ['./update.component.css']
 })
 export class UpdateComponent implements OnInit {

client:Client= new Client();
editForm: FormGroup;

constructor(private route:ActivatedRoute, private service:UserService, private router:Router,        private formBuilder:FormBuilder) { }


ngOnInit() {

 this.editForm = new FormGroup({
  id: new FormControl(),
  domain: new FormControl(),
  owner : new FormControl(),
  email: new FormControl(),
  hostComp : new FormControl(),
  cpUrl: new FormControl(),
  expDate: new FormControl(),
  cpUsername : new FormControl(),
  cpPassword : new FormControl(),
  depDate : new FormControl(),
  notices: new FormControl() 
 });



  this.route.params.subscribe(data=>{
  const id = data.id;


     this.service.getClient(id).subscribe(data=>{

     this.editForm.setValue({
      id: data.id,
      domain: data.domain,
      owner : data.owner,
      email: data.email,
      hostComp : data.hostComp,
      cpUrl: data.cpUrl,
      expDate: data.expDate,
      cpUsername : data.cpUsername,
      cpPassword : data.cpPassword,
      depDate : data.depDate,
      notices: data.notices 
    })     
    });
   });
  }

  cancel(){
 let id = this.client.id
 this.router.navigate(['/info', id]);
  }

  update(){

  this.service.updateClient(this.client).subscribe(data=>{
    this.router.navigate(['/info', this.client.id]);
  });
  }
   }

and the html view is like this

<form  [formGroup]="editForm" (ngSubmit)="update()">


    <label>Domain</label>
   <input type="text"  formControlName="domain" name="domain" >

   <label>Owner</label>
    <input type="text"  name="owner" formControlName="owner" >


   <label>Email</label>
    <input type="text"  name="email" formControlName="email" >

   <label>Hosting Company</label>
   <input type="text"  name="hostcomp" formControlName="hostComp" >

     <label>CP URL</label>
   <input type="text"  name="cpurl" formControlName="cpUrl" >

    <label>Expiration</label>
    <input type="date"  name="expdate" formControlName="expDate" >

    <label>Deployment</label>
    <input type="date"  name="depdate" formControlName="depDate" >

     <button type="submit" class="btn btn-success">Submit</button>
     <button type="submit" class="btn btn-primary" (click)="cancel()">Cancel</button>

   </form>
5
  • 1
    please try with this when you are set date new Date(data.expDate).toISOString().substring(0,10) Commented Jan 15, 2020 at 6:46
  • This solve my problem, thank you kushal shah Commented Jan 15, 2020 at 6:58
  • when the client has no date, i'm having 1/1/1970 populated instead of null, do you know how to handle this issue please Commented Jan 15, 2020 at 7:31
  • simple in setValue use the ternary operator: expDate: data.expDate?new Date(data.expDate).toISOString().substring(0,10):null. NOTE I have no time to check, but I think that's it's only expDate:new Date(data.expDate) Commented Jan 15, 2020 at 7:35
  • I tried using the built-in package, see if it works for you stackoverflow.com/a/64135962/8490589 Commented Sep 30, 2020 at 10:51

1 Answer 1

1

It might be due to the different data types. Possibly your date that is coming from api is in string and you are trying to set value on input type of date

You can try this

this.editForm.setValue({
  id: data.id,
  domain: data.domain,
  owner : data.owner,
  email: data.email,
  hostComp : data.hostComp,
  cpUrl: data.cpUrl,
  expDate: new Date(data.expDate),
  cpUsername : data.cpUsername,
  cpPassword : data.cpPassword,
  depDate : new Date(data.depDate),
  notices: data.notices 
}) 
Sign up to request clarification or add additional context in comments.

1 Comment

Pleasure. If this answer helped you so please accept the answer so others can also get this.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.