Ion-input not rendering in subcomponent v4

@Tanakasan1734 wrote:

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

Posts: 1

Participants: 1

Read full topic