简体   繁体   中英

I can't get the value of a form item when it's inside an ng-template on ionic v6

I have this form, and when I submit my form I can't get the "fechaAntecedente" value, which is an ion-date time inside an ng-template, thanks in advance.

<form #fForm3="ngForm">
.
.
.
 <ion-item button="true" id="open-date-input">
        <ion-label>Fecha</ion-label>
          <ion-text slot="end">{{ dateValue }}</ion-text>
          <ion-popover trigger="open-date-input" show-backdrop="false" >
            <ng-template>
              <ion-datetime
                name="fechaAntecedente"
                presentation="date"
                #popoverDatetime
                (ionChange)="dateValue = formatDate(popoverDatetime.value)"
                [(ngModel)]="form3.fechaAntecedente"
              >
            </ion-datetime>
            </ng-template>
          </ion-popover>
        </ion-item>
.
.
.
</form>

If I don't use ng-template I can get the value from the form, but it wouldn't show the date in overlay

.html file

<ion-item lines="full" button="true" id="open-date-input">
        <ion-icon name="open-sharp" slot="start" class="detail_icon" color="primary"></ion-icon>
        <ion-label slot="end" class="detail_note"> Date of Purchase </ion-label>
        <ion-label class="detail_title ion-text-wrap">{{ dateValue }}</ion-label>
        <ion-popover trigger="open-date-input" show-backdrop="false">
          <ng-template>
            <ion-datetime #popoverDatetime presentation="date"
              (ionChange)=" dateValue=formatDate(popoverDatetime.value)">
            </ion-datetime>
          </ng-template>
        </ion-popover>
</ion-item>

.ts file

import { DatePipe } from '@angular/common'

export class page implements OnInit {

dateValue = '';

constructor( public datepipe: DatePipe ) { }

formatDate(value: string) {
    return this.datepipe.transform(value, 'yyyy-dd-MM');
}

}

Now in your ts file you can get the date using the property dateValue. If you have any doubt just check the date using console.log(this.dateValue) while submiting your form.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM