我应该如何将数组从模型绑定到 UI?
好吧,我宁愿推动所有emails from profile.emails
to the formArray
,否则您将拥有值,但没有验证。
我应该如何验证数组的长度?
您可以使用Validators.minLength(Number)
和其他任何人一样control.
Demo code:
成分:
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]
});
}
}
模板:
<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:请注意,参数Validators.minLength(param)
method必须大于1,否则无法验证。
正如你所看到的source https://github.com/angular/angular/blob/7b7ae5fe56dd05a28821b5324e7d7863247bacee/modules/%40angular/forms/src/validators.ts#L114当。。。的时候control为空则自动返回null。
然后,为了使其按您的预期工作,您可以添加required
验证器:
this.emailsCtrl = this.formBuilder.array([], Validators.compose([Validators.required, Validators.minLength(ANY_NUMBER > 1)]);
并在模板中:
<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:
我认为在您的中传递您要删除的电子邮件的索引更有意义removeEmail
function,所以你不必打电话indexOf
得到的索引specific email
。你可以这样做:
<div *ngFor="let emailInfo of emailsCtrl.value; let i = index">
{{emailInfo.email}}
<button (click)="removeEmail(i)">
Remove
</button>
</div>
成分:
removeEmail(i: number): void {
this.emailsCtrl.removeAt(i);
}
Take a look at this simple DEMO http://plnkr.co/edit/YoqdBEo0MihaxdhHH1FV?p=preview