Question

我正在尝试创建一个通用的ReactiveForms-Frameworks，它可以处理Reactive-Form的创建以及验证。我在这里创建了一个回购https://github.com/DrMueller/Ng-ReactiveValidation来修补这个想法。我有一个名为IFormWithValidation的接口，它保存FormGroup以及可以验证的逻辑控件。我还有一个Form-Control组件，它接收一个逻辑控件作为输入。这个FormControl-Component看起来像这样：

<div [formGroup]="formGroup">
  <div class="form-group">
    <div [class.has-error]="validatedControl.hasErrors">
      <div class="row">
        <ng-content select=".form__contentselector--body">
        </ng-content>
      </div>
      <div class="row">
        <app-form-validation-error-display [errorContainer]="validatedControl.errorContainer"></app-form-validation-error-display>
      </div>
    </div>
  </div>
</div>

ValidatedControl-Object如下：

export class ValidatedControl {
  private _errorContainer = ControlValidationErrorContainer.nullObject;

  public get errorContainer(): ControlValidationErrorContainer {
    return this._errorContainer;
  }

  public static create(controlName: string) {
    return new ValidatedControl(controlName);
  }

  constructor(public controlName: string) {
  }

  public get hasErrors(): boolean {
    return this.errorContainer.validationErrors.length > 0;
  }

  public setValidationErrors(validationErrors: ValidationError[]) {
    this._errorContainer.setValidationErrors(validationErrors);
  }
}

正如您在HTML中看到的，我还有一个SubComponent，它负责显示验证错误（如果有的话）。这个组件非常简单，接收一个错误数组并显示它们：

    <div class="help-block">
      <ul class="app__ul--errors">
        <li *ngFor="let validationError of errorContainer.validationErrors">
          {{ validationError.errorMessage }}
        </li>
      </ul>
    </div>

将所有内容捆绑在一起，然后我可以使用内容投影定义一个Form并只传递ValidatedControl实例：

<div class="panel panel-primary">
  <div class="panel-heading">
    Hello POC
  </div>
  <div class="panel-body">
    <form class="form-horizontal" [formGroup]="form.formGroup" novalidate>
      <fieldset>
        <app-form-control [formGroup]="form.formGroup" [validatedControl]="form.getValidatedControl('nameIdentifierControl')">
          <div class="form__contentselector--body">
            <label class="col-md-2 control-label">Name:</label>
            <div class="col-md-8">
              <input class="form-control" id="nameIdentifierId" type="text" placeholder="User-Login (required)" formControlName="nameIdentifierControl"
              />
            </div>
          </div>
        </app-form-control>
      </fieldset>
    </form>
  </div>
</div>

问题：FormControl-Component设置并填充错误显示一个，但这有问题：客户端无法决定放置它的位置。在此示例中，结果非常难看，因为标签和控件是由Client-Projection定义的，但错误不是：

所以，我希望让客户决定在哪里进行验证，但我不想两次传递ValidatedControl-Instance。内容投射甚至是正确的过程吗？

内容投影：将数据传递到投影组件

0 个答案: