the date return undefined in form angular 4

Question

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



    }

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

the date return undefined in form angular 4

Sign up