I have recently migrated to Angular 14 and I am trying to initialise a Typed Form following this guide. It is advising to declare the form directly in the class like so:
@Component({
selector: 'login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
form = this.fb.group({
email: ["", {
validators: [Validators.required, Validators.email]
}],
password: ['', [Validators.required, Validators.minLength(8)]]
});
constructor(private fb: FormBuilder) {
}
login() {
}
}
However, in my case, the form labels depend on a property that is declared in the constructor. As a result, I cannot see my labels on the form. The official guide specifically says: "While trying to leverage typed forms, a very common pitfall that you want to avoid is to declare your form member variables as having the explicit type FormGroup, like so:
@Component({
selector: 'login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
form:FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.form = this.fb.group({
email: ["", {
validators: [Validators.required, Validators.email]
}],
password: ['', [Validators.required, Validators.minLength(8)]]
});
}
}
... which is what I'm used to doing in that case. How do I make this work?
