I have a sub component on a page to handle forgotten password. ion-input isn’t rendering in this sub component, is in the DOM as I can use the inspector hover thing to find it, if I click where is should show then the label turns red to show it is required. If I move the code back into the parent component all works fine. I’ve tried the item-content attribute that seems to have been suggested for v3 but I either did it wrong or it didn’t work.
Changing it to a normal works but then it looks rubbish.
<form [formGroup]="frmPasswordReset" (ngSubmit)="sendPasswordResetRequest()">
<ion-item lines="none" color="none">
<ion-label position="stacked" color="light">Email</ion-label>
<ion-input type="email" formControlName="emailAddress"></ion-input>
</ion-item>
<ion-button expand="block" type="button" color="light" fill="outline" class="ion-padding-horizontal ion-margin-vertical">
Forgot password
</ion-button>
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { AngularFireAuth } from '@angular/fire/auth';
@Component({
selector: 'app-forgot-password',
templateUrl: './forgot-password.component.html',
styleUrls: ['./forgot-password.component.scss'],
})
export class ForgotPasswordComponent implements OnInit {
frmPasswordReset: FormGroup;
constructor(private afAuth: AngularFireAuth, private fb: FormBuilder) { }
ngOnInit() {
this.frmPasswordReset = this.fb.group({
emailAddress: ['', [Validators.required, Validators.email]]
});
}
}