Angular значение даты реактивных форм - PullRequest
Новая
       5

Angular значение даты реактивных форм

0 голосов
/ 15 января 2020

Я работаю над проектом Angular, один из компонентов - клиентский компонент обновления, в котором данные клиента заполняются в реактивную форму для редактирования, информация клиента поступает из API,
я использовал FormGroup.setvalue для заполнения данных в форме заполняются все данные клиента, кроме поля ввода «Дата». Не могли бы вы сообщить, почему поле ввода «Дата» ничего не заполняет, примите во внимание, что вся эта информация будет повторно отправлена ​​после редактирования, 

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]);
  });
  }
   }

и вид html выглядит следующим образом 

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

1 Ответ

0 голосов
/ 15 января 2020

Это может быть связано с другим data types. Возможно, ваш date от api находится в string, и вы пытаетесь установить значение для типа ввода date

Вы можете попробовать это 

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 
})
...