Angular:迭代 ngForm 控件？

Question

目标是当用户单击按钮转到下一页时，如果页面部分填写但无效，则阻止用户继续并显示错误指示符。

在模板驱动的表单中，我有几个容器元素使用 NgModelGroup 属性来表示表单中的“页面”。在我的组件中，我想引用这个集合，以便我可以使用索引访问它们。由于我无法获得此集合(@AJT_82 在下面评论原因)，这是我的方法:

我制作了一个类来保存有关页面的信息。

export class Page
{
    title: string;
    hasError: boolean;  //should the page display an error indicator
}

在我的组件中，我在 ngOnInit 中填充了一个数组 pages: Page[]

ngOnInit()
{
    this.pages = [{title: "Page 1", hasError: false},
                  {title: "Page 2", hasError: false},
                  {title: "Page 3", hasError: false}]
}

@DeborahK 在她的回答中给了我

this.form.form.get('pg1')) 

获取名为“pg”+ currentPg+1(+1 以匹配 View ，因为数组从 0 开始)的个人 ngModelGroup，然后我可以在点击事件中使用它，这将导致A) 转到下一页或 B) 将 hasError 属性设置为 true 并且不转到下一页。

let p = this.form.form.get("pg"+ (this.currentPg+1));
//if the page is partially filled out but not valid
if(p.invalid && p.dirty)
  this.pages[this.currentPg].hasError = true;
else
{
  //even if it's false, re-false it ;)
  this.pages[this.currentPg].hasError = false;

  //continue to next page. 
  //i.e. this.currentPg++ or this.currentPg--
}

回到模板中，为了在选项卡或页面上显示错误指示器，我只检查了 pages[currentPg].hasError 属性。在选项卡元素上分配“has-error”类以设置选项卡样式。

<div id="tabs">
  <a *ngFor="let p of pages" 
     [ngClass]="(p.hasError ? ' has-error' : '')"><p>{{p.title}}</p></a>
</div>

<form #f="ngForm">
  <div ngModelGroup="pg1"> <!-- pages[0] -->
    <div id="errorBlock" *ngIf="pages[currentPg].hasError">
      You had an error.
    </div>
    <div>
      <input ngModel/>
      <input ngModel/>
    </div>
    <div>
      <input ngModel/>
      <input ngModel/>
    </div>
  </div>
  <div ngModelGroup="pg2"> <!-- pages[1] -->
    <input ngModel/>
  </div>
</form>

这是示例的组件:

...
currentPg: number = 0;
pages: Page[] = [];
@ViewChild('f') public form: NgForm;

ngOnInit()
{
    this.pages = [{title: "Page 1", hasError: false},
                  {title: "Page 2", hasError: false},
                  {title: "Page 3", hasError: false}]
}

NextPage()
{
  let p = this.form.form.get("pg"+ (this.currentPg+1));
  //if the page is partially filled out but not valid
  if(p.invalid && p.dirty)
    this.pages[this.currentPg].hasError = true;
  else
  {
    //even if it's false, re-false it ;)
    this.pages[this.currentPg].hasError = false;

    //Do navigation logic. 
    //i.e. this.currentPg++ or this.currentPg--
  }
}

同样，如果有一种方法可以获取 ngModelGroups 的集合并将其用作数组，那么很多问题都可以消失。

Answer 1

这段代码对我有用:

    Object.keys((<FormGroup>this.form.form.get('pg1')).controls).forEach(element => {
        console.log(element);
    });

但关键问题(根据您问题下方的评论)是此代码所在的位置。我将其添加为提交按钮过程的一部分。

在 ngOnInit、ngAfterViewInit 和 ngAfterViewChecked 中，这些元素的值为空/未定义。

如果你只是想知道表单组是否有效，你可以这样做:

    let isValid = this.form.form.get('pg1').valid;

或者，您可以使用标签页并在任何有验证错误的页面上显示错误图标，如下所示:

在这个例子中，我使用的是模板驱动的表单。表单上的每个输入元素看起来像这样:

        <div class="form-group" 
                [ngClass]="{'has-error': (productNameVar.touched || 
                                          productNameVar.dirty || product.id !== 0) && 
                                          !productNameVar.valid }">
            <label class="col-md-2 control-label" 
                    for="productNameId">Product Name</label>

            <div class="col-md-8">
                <input class="form-control" 
                        id="productNameId" 
                        type="text" 
                        placeholder="Name (required)"
                        required
                        minlength="3"
                        [(ngModel)] = product.productName
                        name="productName"
                        #productNameVar="ngModel" />
                <span class="help-block" *ngIf="(productNameVar.touched ||
                                                 productNameVar.dirty || product.id !== 0) &&
                                                 productNameVar.errors">
                    <span *ngIf="productNameVar.errors.required">
                        Product name is required.
                    </span>
                    <span *ngIf="productNameVar.errors.minlength">
                        Product name must be at least three characters.
                    </span>
                </span>
            </div>
        </div>

您可以在此处找到此示例的完整代码:https://github.com/DeborahK/Angular-Routing在 APM-Final 文件夹中。 (这是我的“Angular Routing”Pluralsight 类(class)中的代码。)