如何将索引值传递给*ngIf表达式

Question

我有一个使用FormArray添加更多标记字段的表单。我在每个字段上都使用了一个验证器，我想在输入了无效标记的每个字段下显示错误消息。问题是，我不知道如何将标记的索引传递给*ngIf表达式。我尝试使用：

*ngIf="commentForm.controls.i.errors.validError">

*ngIf="commentForm.controls[i].errors.validError">

*ngIf="commentForm.controls.$i.errors.validError">

但每一个都给了我错误：

类型错误："_co.commentForm.controls.i未定义">

类型错误："_co.commentForm.controls[_v.context.index]未定义">

类型错误："_co.commentForm.controls.$i未定义">

我怎样才能让它工作？我正在使用最新的Angular。

代码：comment-form.component.html

<div formArrayName="tags">
<h3>Tags</h3> <button (click)="addTag()">Add Tag</button>

<div *ngFor="let tagname of tags.controls; let i=index">
<label>
Tag:
<input type="text" [formControlName]="i">
<div *ngIf="submitted && commentForm.controls.i.errors" class="errorbox">
<div *ngIf="commentForm.controls.i.errors.validError" class ="error">This tag is invalid!</div>
</div>
</label>
</div>
</div>

comment-form.component.ts:

@Component({
selector: 'app-comment-form',
templateUrl: './comment-form.component.html',
styleUrls: ['./comment-form.component.scss']
})
export class CommentFormComponent implements OnInit {
commentForm: FormGroup;
submitted = false;
success = false;
get tags() {
return this.commentForm.get('tags') as FormArray;
}
addTag() {
this.tags.push(this.formBuilder.control(''));
}
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.commentForm = this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3), nameValidator()]],
email: ['', [Validators.required, emailValidator()]],
comment: ['', [Validators.required, commentValidator()]],
tags: this.formBuilder.array([''], tagsValidator()) 
});
}
onSubmit() {
this.submitted = true;
if (this.commentForm.invalid) {
return;
}
this.success = true;
}
}

其他信息：添加标签有效，对标签进行验证有效，我只需要在验证返回false时显示错误消息。我不能这样做，因为*ngIf="commentForm.controls[TAGNAME].errors.validError"不起作用，也不起作用是因为我将标记名传递到中的方式有问题

Answer 1

看看这个，所需的错误只显示在给定的控制下：

<div formArrayName='tags'>
<div *ngFor='let control of form.controls.tags.controls;index as i'>
Tag{{i}}: <input type='text' [formControlName]='i'>
<span *ngIf='control.errors'>Required</span>
</div>

创建堆栈litz：https://stackblitz.com/edit/angular-conditional-ngif-formarray

Answer 2

您好，要使用索引，您需要一个循环

<ul>
<li *ngFor="let item of items; let i = index">
<a *ngIf="i % 2 = 0">Link {{ item }} number {{ i }}</a>
</li>
</ul>

编辑：我的答案不完整，您不需要在您的情况下使用i，只需像访问forEach函数一样访问值即可。在我的例子中，像您的｛｛item｝｝＝＝item＝＝items[i]

Answer 3

欢迎加入社区！

看起来你正试图使用点运算符进行如下访问：

commentForm.controls.i.errors.validError

当你想要的是：

commentForm.controls[i].errors?.validError

请注意，ValidationErrors可以为null，因此您应该使用问号进行安全导航。

Answer 4

有效的答案是stackblitz。除了找出向每个标签添加错误消息的方法外，它还帮助我找出我错误地将验证器传递给了标签。正确的方法是将验证器传递给addTag()函数中的每个标记，而不是像我那样在ngOnInit函数中传递一次。谢谢你的回答。