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

【问题标题】：How to pass index value to *ngIf expression如何将索引值传递给 *ngIf 表达式
【发布时间】：2019-01-08 16:39:31
【问题描述】：

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

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

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

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

但每一个都给我错误：

TypeError：“_co.commentForm.controls.i 未定义”

TypeError：“_co.commentForm.controls[_v.context.index] 未定义”

TypeError：“_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" 不起作用而且它不起作用，因为我将标记名传递给它的方式有问题

【问题讨论】：

你试过了吗：commentForm.get(i).errors.validError？
这个给了我以下错误：ERROR TypeError: "_co.commentForm.controls.get is not a function"
你试过用.controlsConfig代替.controls吗？
有人知道这个吗？我看到'placeholder="{{param?.parameterAllowedValues[0]?.description}}"'的“无法读取未定义的属性描述”。我不能添加“？”到 [0] 的开头或结尾，让它跳过空/未定义检查，因为如果我这样做会发生另一个错误。

标签： angular

【解决方案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>

创建了一个堆栈闪电战：https://stackblitz.com/edit/angular-conditional-ngif-formarray

【讨论】：

【解决方案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]

【讨论】：

每个标签在这里都有它的名字：[formControlName]="i" 我需要标签的名字来访问它的错误。名称必须像这样在 *ngIf 表达式中输入 -> *ngIf="commentForm.controls..errors.validError" 但我似乎无法这样做
你为什么不做 *ngIf="myFunction(i)" 其中 myFunction 使用 i 获取数据？？

【解决方案3】：

欢迎加入社区！

您似乎正在尝试使用点运算符进行如下访问：

commentForm.controls.i.errors.validError

当你想要的是这样的：

commentForm.controls[i].errors?.validError

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

【讨论】：

使用 *ngIf="commentForm.controls[i].errors?.validError" 给出以下错误 ERROR TypeError: "_co.commentForm.controls[_v.context.index] is undefined
我将 ts 文件添加到问题中

【解决方案4】：

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

【讨论】：