形式 – 角度2 – 使用带有可选字段的ngControl

用例是：根据用户输入,隐藏或停用表单中的某些特定字段.但是,如果显示这些输入,则必须对其进行验证.

当只需要基本验证时,我可以做一个或另一个：

>如果仅需要输入,则使用ngControl并且需要使用A-OK
>如果需要特定的格式,可以使用pattern属性.这不是Angular,但它有效.

但是为了实现更复杂的验证,我一直在尝试使用ngControl耦合到ngFormModel,以便使用自定义检查.我使用了以下页面中的代码：

How to add form validation pattern in angular2(和那里引用的链接)

Angular2 Forms :Validations,ngControl,ngModel etc

我的代码如下：

HTML

<div>
  <h1>Rundown of the problem</h1>
  <form (ngSubmit)="submitForm()" #formState="ngForm" [ngFormModel]="myForm">
    <div class="checkbox">
      <label>
        <input type="checkbox" [(ngModel)]="model.hideField" ngControl="hideField"> Is the input below useless for you ?
      </label>
    </div>

    <div *ngIf="!model.hideField">
      <div class="form-group">
        <label for="optionalField">Potentially irrelevant field </label>
        <input type="text" class="form-control" [(ngModel)]="model.optionalField" ngControl="optionalField" required #optionalField="ngForm">
        <div [hidden]="optionalField.valid || optionalField.pristine" class="alert alert-warning">
          This input must go through myCustomValidator(),so behave.
        </div>
      </div>
    </div>

    <button type="submit" class="btn btn-primary" [disabled]="!formState.form.valid">I can't be enabled without accessing the input :(</button>
    <button type="submit" class="btn btn-default">Submit without using form.valid (boo !)</button>
  </form>
</div>

打字稿

import {Component,ChangeDetectorRef,AfterViewInit } from 'angular2/core';
import {NgForm,FormBuilder,Validators,ControlGroup,FORM_DIRECTIVES}    from 'angular2/common';

@Component({
  selector: 'accueil',templateUrl: 'app/accueil.component.bak.html',directives:[FORM_DIRECTIVES],providers: [FormBuilder]
})
export class AccueilComponent implements AfterViewInit {

  private myForm: ControlGroup;
  model: any;

  constructor(fb: FormBuilder,cdr: ChangeDetectorRef) {
    this.cdr = cdr ;

    this.model = {} ;
    this.myForm = fb.group({
      "hideField": [false],"optionalField": [this.model.optionalField,Validators.compose([this.myCustomValidator])]
    });
  }

  ngAfterViewInit() {
    // Without this,I get the "Expression has changed after it was checked" exception.
    // See also : https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked
    this.cdr.detectChanges();
  }

  submitForm(){
    alert("Submitted !");
  }

  myCustomValidator(optionalField){
    // Replace "true" by "_someService.someCheckRequiringLogicOrData()"
    if(true) {
      return null;
    }

    return { "ohNoes": true };
  }
}

即使使用* ngIf从模板中删除输入,构造函数仍在引用该控件.这反过来阻止我使用[disabled] =“！formState.form.valid”,因为myForm可以理解为INVALID.

我正在瞄准可能使用角度2吗？我相信这不是一个常见的用例,但是再一次使用我目前的知识,我看不出我能如何工作.

谢谢 ！