My model (this.profile
) in javascript has a property called emails
, which is an array of {email, isDefault, status}
Then I defined it as below
this.profileForm = this.formBuilder.group({
.... other properties here
emails: [this.profile.emails]
});
console.log(this.profile.emails); //is an array
console.log(this.profileForm.emails); // undefined
in html file I used it as
<div *ngFor="let emailInfo of profileForm.emails">
{{emailInfo.email}}
<button (click)="removeEmail(emailInfo)">
Remove
</button>
</div>
If I don't add it in formGroup
and use it as an array - like below - it's working fine, but then I have a business rule that this array shouldn't be empty and I am unable to set form validation based on length of this
emails : [];
this.profileForm = this.formBuilder.group({
.... other properties here
});
this.emails = this.profile.emails;
console.log(this.profile.emails); //is an array
console.log(this.emails); // is an array
also I tried using formBuilder.array
but that one is for having array of controls not array of data.
emails: this.formBuilder.array([this.profile.emails])
then my question is how should I bind an array from model to UI and how should I validate the length of array?
How should I bind an array from model to UI?
Well, I'd prefer to push all the emails from profile.emails
to the formArray
, otherwise you'll have the values, but no validation.
How should I validate the length of array?
You can use the Validators.minLength(Number)
as any other control.
Demo code:
Component:
export class AnyComponent implements OnInit {
profileForm: FormGroup;
emailsCtrl: FormArray;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.emailsCtrl = this.formBuilder.array([], Validators.minLength(ANY_NUMBER));
this.profile.emails.forEach((email: any) => this.emailsCtrl.push(this.initEmail(email)));
this.profileForm = this.formBuilder.group({
// ... other controls
emails: this.emailsCtrl
});
}
private initEmail = (obj: any): FormGroup => {
return this.formBuilder.group({
'email': [obj.email], //, any validation],
'isDefault': [obj.isDefault] //, any validation]
});
}
}
Template:
<div *ngFor="let emailInfo of emailsCtrl.value">
{{emailInfo.email}}
<button (click)="removeEmail(emailInfo)">
Remove
</button>
</div>
<div *ngIf="emailsCtrl.hasError('minlength')">
It should have at least {{emailsCtrl.getError('minlength').requiredLength}} emails
</div>
PS1: Note that the param of Validators.minLength(param)
method must be greater than 1, otherwise it won't validate.
As you can see in source when the control is empty it automatically returns null.
Then, to make it work as you expected you could add the required
Validator:
this.emailsCtrl = this.formBuilder.array([], Validators.compose([Validators.required, Validators.minLength(ANY_NUMBER > 1)]);
And in template:
<div *ngIf="emailsCtrl.invalid">
<span *ngIf="emailsCtrl.hasError('required')">
It's required
</span>
<span *ngIf="emailsCtrl.hasError('minlength')">
It should have at least {{emailsCtrl.getError('minlength').requiredLength}} emails
</span>
</div>
PS2:
I think makes more sense to pass the index of the email that you want to delete in your removeEmail
function, so you willn't have to call indexOf
to get the index of the specific email
. You can do something like this:
<div *ngFor="let emailInfo of emailsCtrl.value; let i = index">
{{emailInfo.email}}
<button (click)="removeEmail(i)">
Remove
</button>
</div>
Component:
removeEmail(i: number): void {
this.emailsCtrl.removeAt(i);
}
Take a look at this simple DEMO
This works for me (angular 2.1.2), this approach gives you the flexibility to define a custom validation for your emails:
this.profileForm = this.formBuilder.group({
emails: [this.profile.emails, FormValidatorUtils.nonEmpty]
// ......
});
export class FormValidatorUtils {
static nonEmpty(control: any) {
if (!control.value || control.value.length === 0) {
return { 'noElements': true };
}
return null;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With