I am facing an issue with a form group where I need to display one of the required inputs using ngIf. However, even if this input does not exist, the form control still checks it and returns that the form is not valid. Here is my code: HTML:
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label>mobile</label>
<input type="text" formControlName="mobile" />
<div *ngIf="!hasInfo">
<label>firstName</label>
<input type="text" formControlName="firstName" />
<label>lastName</label>
<input type="text" formControlName="lastName" />
</div>
<button type="submit">Submit</button>
</form>
TypeScript:
constructor(){
this.formBuilder();
}
ngOnInit() {
if (accountResponse.length > 0) this.hasInfo= true;
}
formBuilder() {
this.myForm= new FormGroup({
mobile: new FormControl(null, Validator.required()),
firstName: new FormControl(null, Validator.required()),
lastName: new FormControl(null, Validator.required()),
});
}
onSubmit(){
if(this.myForm.valid){
console.log("valid")
}else{
console.log("not valid")
}
}
If hasInfo is true and not showing firstName and lastName, my form should return as valid. However, it always shows up as not valid.