Aya Abdelaziz Aya Abdelaziz - 3 years ago 242
TypeScript Question

the date return undefined in form angular 4

i have the date field in my form i want to pass it to API

component.html:

<form [formGroup]="addMeetingForm" (ngSubmit)="onSubmit(t)" #t="ngForm">
<div class="row">
<!-- first Row data -->
<div class="form-group" class="col-lg-5 ">
<ul class="flex-outer">
<!-- first Element -->
<li>
<label for="date">
<i class="fa fa-calendar fa-lg"></i>
date
<span style="color: red"> * </span>
</label>
<input type="date" formControlName="date" [(ngModel)]="date" >
</li>


component.ts:

ngOnInit(){
console.log(this.date);
this.addMeetingForm= new FormGroup({

'date' : new FormControl(null, Validators.required),


the date always log undefined , i want to choose date form the calendar then pass it to api

dataStorage.service.ts:

storeMeeting(meeting){
let url = 'http://api.azharcouncil.com/api/MainCouncils/PostMainCouncil?place='+meeting.place+'&number='+meeting.number+'&type='+meeting.kind
+'&date='+meeting.date+'&time='+meeting.time+'&description='+meeting.description+'&file='+meeting.file+'&notes'+meeting.notes+'&user_Id='+15;
let headers = new Headers({ 'Content-Type': 'text/plain' });
let options = new RequestOptions({ headers: headers });
return this.http.post(url, JSON.stringify(meeting), options);

}

Answer Source

You don't need the [(ngModel)]

Here is a structure:

<form [formGroup]="model" (ngSubmit)="send(model.value)" #f="ngForm" novalidate">

<input name="name" formControlName="name">

<input name="email" formControlName="email">

<input name="fonction" formControlName="fonction">

<textarea name="message" formControlName="message"></textarea>

<button [disabled]="!model.valid">SEND</button>

</form>

and

this.model = fb.group({
    name: [null, Validators.required],
    message: [null],
    email: [null, Validators.email],
    fonction: [null, Validators.compose([YourCustomValidator, Validators.required])]
})

More here: https://angular.io/guide/reactive-forms

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download