Почему Дата в угловой форме не отображается должным образом - PullRequest
Новая
       30

Почему Дата в угловой форме не отображается должным образом

0 голосов
/ 13 сентября 2018

Я пишу Angular Crud Aplication.В одном месте пользователь создает и получает информацию об одном контракте. 

@Component({
  selector: 'app-contract-detail-form',
  templateUrl: './contract-detail-form.component.html',
  styleUrls: ['./contract-detail-form.component.css']
})
export class ContractDetailFormComponent implements OnInit {
  frm: FormGroup;

  ngOnInit() {
    this.frm = this.fb.group(new ContractModel());
  }

  onActionSave() {
    console.log('----inserting ', this.frm.value);
    this.service.insert(this.frm.value);
  }

  onActionUpdate() {
    console.log('----updating ', this.frm.value);
    this.service.update(this.frm.value);
  }

  edit(id) {
    this.service.selectOne(id).subscriber(result => {
      console.log('-----selectOne: ', result.serverData[0]);
      this.frm.setValue(result.serverData[0]);
    });
  }

  new (){
    // open some form
  }

}

Как вы можете видеть в этой строке 

 this.frm = this.fb.group(new ContractModel());

Я использую некоторый класс в качестве модели, где хранятся данные формы:

export class ContractModel {
  id = null;
  contract_num = '';
  contract_date: Date = null;
  customer_name = '';
}

Поэтому, когда пользователь нажимает кнопку «Новый», появляется форма для нового договора.Затем он заполняет эту форму и нажимает кнопку Сохранить.Он запускает функцию onActionSave, которая отправляет эти данные на сервер.В этой функции в строке 

console.log('----inserting ', this.frm.value);

показано следующее: 

{
id: null, 
contract_num: "22", 
contract_date: Thu Sep 13 2018 00:00:00 GMT+0600 (Восточный Казахстан), customer_name: ""
}

Это нормально.Но когда пользователь собирается обновить эти данные, он нажимает кнопку «Обновить», которая запускает функцию «редактировать».Внутри этой функции данные извлекаются с сервера.В строке 

console.log('-----selectOne: ', result.serverData[0]);

показано следующее: 

{id: 8, 
contract_num: "22", 
contract_date: 1536775200000, 
customer_name: null
}

Как вы можете видеть, свойство 'contract_date' представлено как не анализируемое длинное значение.И затем, когда 

this.frm.setValue(result.serverData[0]);

выполняется, все поля формы на веб-странице заполняются, кроме поля 'contract_date'.

Я понимаю, это ', потому что для переноса в ISO-8601 требуется датаto setValue ();

Поэтому, когда пользователь изменяет некоторые данные (не 'contract_date') в этой форме и нажимает кнопку Обновить, он вызывает onActionUpdate (), а в строке 

console.log('----updating ', this.frm.value);

этопоказывая 

{id: 8, 
    contract_num: "22", 
    contract_date: 1536775200000, 
    customer_name: null
    }

Но если пользователь изменил 'contract_date' в этой строке, он покажет 

{id: 8, 
contract_num: "22", 
contract_date: Wed Sep 12 2018 00:00:00 GMT+0600 (Восточный Казахстан), customer_name: null
}

Вопрос состоит в том, , как сделать поля углового анализа DATE в ответчто приходит с сервера?

Дополнительно вот класс обслуживания для модуля Contracts 

@Injectable({
  providedIn: 'root'
})
export class ContractsService {

  serverUrl = environment.serverUrl;

  constructor(private http: HttpClient) {
  }

  selectOne(id: number): Observable<ResultMessageModel<ContractModel>> {
    const requestUrl = `${this.serverUrl}contracts/selectOne/${id}`;
    return this.http.get<ResultMessageModel<ContractModel>>(requestUrl);
  }

  insert(model: ContractModel): Observable<ResultMessageModel<ContractModel>> {
    const requestUrl = `${this.serverUrl}contracts/insert`;
    return this.http.post<ResultMessageModel<ContractModel>>(requestUrl, model);
  }

  update(model: ContractModel): Observable<ResultMessageModel<ContractModel>> {
    const requestUrl = `${this.serverUrl}contracts/update`;
    return this.http.put<ResultMessageModel<ContractModel>>(requestUrl, model);
  }
}

и ResultMessageModel: 

export class ResultMessageModel<T> {
  success: boolean;
  message: string;
  serverData: T[];
  count: number;
}

В Back-end есть Spring Framework с библиотекой Джексонадля ответа JSON 

 @RestController
    @RequestMapping("/contracts")
    public class ContractsController {

        @Autowired
        ContractsService service;

        @GetMapping("/selectOne/{id}")
        public WebMessageModel selectOne(@PathVariable Long id) {
            return new WebMessageModel(true, service.selectOne(id));
        }

        @PostMapping("/insert")
        public WebMessageModel insert(@RequestBody ContractModel model) {
            return new WebMessageModel(service.insert(model));
        }

        @PutMapping("/update")
        public WebMessageModel update(@RequestBody ContractModel model) {
            return new WebMessageModel(service.update(model));
        }
    }

ContractModel.java 

public class ContractModel extends WebDataModel {

    private Long id;
    private String contract_num;
    private Date contract_date;
    private String customer_name;

  // setters getters
    }

WebMessageModel.java 

public class WebMessageModel {

    private String message;
    private boolean success;
    private List<WebDataModel> serverData;
    private int count;
  // getters setters
}
...