Boa Tarde
Eu criei um form modal que tem um campo de data(datepicker), que exibe o calendário com a data. Porém na hora de salvar, ele vem como null.
HTML:
Novo agendamento
×
{{formName}}
Data*
<label class="col-md-2 col-sm-3 col-xs-12 control-label">{{lbHorarioDe}}</label>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="input-group clockpicker" clock-picker data-autoclose="true">
<input type="text" class="form-control" id="horarioDe" name="HorarioDe"
formControlName="txtHorarioDe" required>
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
<label class="col-md-1 col-sm-3 col-xs-12 control-label ">Até*</label>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="input-group clockpicker" clock-picker data-autoclose="true">
<!-- <label>Até</label> -->
<input type="text" class="form-control" id="horarioAte" name="horarioAte"
formControlName="txtHorarioAte" required>
<span class="input-group-addon">
<i class="fa fa-clock-o"></i>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">Profissional*</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<select class="chosen form-control" name="profissional" formControlName="cmbProfissional"
data-placeholder="Selecione um profissional...">
<option selected>Selecione o profissional</option>
<option *ngFor="let prof of listProfissional" [ngValue]="prof.id">
{{prof.nome}}
</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">Cliente*</label>
<div class="col-md-5 col-sm-9 col-xs-12">
<div class="ng-autocomplete">
<ng-autocomplete [data]="listClientes" placeholder="Nome do cliente" [searchKeyword]="keyword"
(selected)='selectEvent($event)' (inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)' [itemTemplate]="itemTemplate"
[notFoundTemplate]="notFoundTemplate">
[formControlName]="txtCliente"
</ng-autocomplete>
<ng-template #itemTemplate let-item>
<a class="" [innerHTML]="item.nome"></a>
</ng-template>
<ng-template #notFoundTemplate let-notFound>
<div class="" [innerHTML]="notFound"></div>
</ng-template>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">Status*</label>
<div class="col-md-4 col-sm-9 col-xs-12">
<select class="chosen form-control" name="statusAgendamento" formControlName="cmbStatus"
data-placeholder="Selecione um status...">
<option *ngFor="let status of listStatus" [ngValue]="status.id">
{{status.descricao}}
</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">Observação</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<textarea class="form-control" rows="5" id="observacao" name="observacao"
formControlName="txtObservacao"></textarea>
</div>
</div>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" type="submit" value="Salvar">Salvar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</form>
</div>
TS
@Component({
selector: 'app-agenda-novo-editar',
templateUrl: './agenda-novo-editar.component.html',
styleUrls: ['./agenda-novo-editar.component.css']
})
export class AgendaNovoEditarComponent implements OnInit {
page: number = 0;
count: number = GESTAOFISIO_QTDREGISTROS;
listProfissional = [];
listClientes = [];
listStatus = [];
keyword = 'nome';
formName = 'Novo Agendamento';
agenda = new Agenda();
formAgenda: FormGroup;
lbHorarioDe = "Horário de*"
constructor(
private router: Router,
private route: ActivatedRoute,
private formBuilder: FormBuilder,
private usuarioService: UsuarioService,
private clienteService: ClienteService,
private agendaService: AgendaService,
private messageUtils: MessageUtilsService,
private spinner: NgxSpinnerService,
private storage: LocalStorageService) { }
ngOnInit() {
this.spinner.show("loadingForm");
this.findProfissionais();
this.findStatus();
this.inicializaAgenda()
this.createForm(this.agenda);
this.spinner.hide("loadingForm");
}
inicializaAgenda() {
this.agenda.usuario = new Usuario();
this.agenda.cliente = new Cliente();
this.agenda.status = new AgendamentoStatus();
this.agenda.status.id = 1; // Agendado
//this.agenda.dataAgendamento = new Date()
this.getProfissionalLogado();
}
getProfissionalLogado() {
this.agenda.usuario = this.storage.getUsuarioLogadoFromLocalStorage();
}
createForm(agenda: Agenda) {
this.formAgenda = this.formBuilder.group({
dataAgendamento: [agenda.dataAgendamento],
txtHorarioDe: [agenda.horarioInicio,[Validators.required]],
txtHorarioAte: [agenda.horarioFim,[Validators.required]],
cmbProfissional: [agenda.usuario.id],
txtCliente: [agenda.cliente.id],
cmbStatus: [agenda.status.id],
txtObservacao: [agenda.observacao]
})
}
salvar(){
console.log(this.formAgenda.get("dataAgendamento").value)
//console.log(this.formAgenda.valid)
console.log("Salvando.....")
}
findProfissionais() {
this.usuarioService.findAllProfissional(this.page,this.count).subscribe((responseApi: ResponseApi) => {
this.listProfissional = responseApi['data']['content'];
});
}
findClienteByName(nome:String) {
this.clienteService.findByName(nome,this.page,this.count).subscribe((responseApi: ResponseApi) => {
this.listClientes = responseApi['data']['content'];
});
}
findStatus() {
this.agendaService.findAllStatus().subscribe((responseApi: ResponseApi) => {
this.listStatus = responseApi['data']['content'];
});
}
selectEvent(item) {
// do something with selected item
}
onChangeSearch(nome: string) {
console.log(nome)
this.findClienteByName(nome);
}
onFocused(e){
// do something when input is focused
}
}
