Angular：迭代 ngForm 控件？

Question

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

在模板驱动的表单中，我有几个容器元素使用NgModelGroup 属性来表示表单中的“页面”。在我的组件中，我想引用这个集合，以便可以使用索引访问它们。由于我无法获得这个集合（@AJT_82 cmets 为什么在下面），这是我的方法：

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

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 的个人ngModelGroup（+1 以匹配视图，因为数组从 0 开始），然后我可以在单击事件中使用它，这将导致 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 属性。在选项卡元素上分配“有错误”类以设置选项卡的样式。

<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);
    });

但关键问题（根据您问题下方的 cmets）是 此代码所在的位置。我将它添加为提交按钮过程的一部分。

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

如果你只需要知道表单组是否有效，你可以这样做：

    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 课程中的代码。）

Answer 2

foo( f: NgForm ){
    Object.values(f.controls).forEach( ctl => {
          console.log(ctl);
    } );
}