用户创建表单 - 更新和创建 - 使用不同的输入。角 2+答案

【问题标题】：User creation form - updating and creating - using different inputs. Angular 2+用户创建表单 - 更新和创建 - 使用不同的输入。角 2+
【发布时间】：2018-10-12 03:54:44
【问题描述】：

我正在创建一个表单。这种形式有两个目的。如果用户选择创建用户，则会出现密码输入。如果用户编辑的是用户，则不会出现密码输入。由于我的验证，我不得不创建两个单独的表单组。（创建表单/编辑表单）。问题是我不能在 (form [formGroup]) 上使用三元操作，不确定如何告诉我的视图它需要在特定表单上操作。

我必须打开表单组的原因是，如果我想编辑用户并尝试提交，表单需要对密码输入字段进行某种验证，因为它只是一个可以从中提取的表单组。希望这可以帮助！

p.s 不在打字稿中显示验证等，与这个问题无关。谢谢！

ngOnInit(){

 this.editForm = this.formBuilder.group({
        userName: this.userName,
      })

      this.creationForm = this.formBuilder.group({
        userName: this.userName,
        password: this.password,
        passwordConfirm: this.passwordConfirm,

      },{
        validator: ConfirmPasswordValidator.MatchPassword // your validation method
      })

}

HTML

<form [formGroup]="(editUserFlag ? editForm : creationForm)" (ngSubmit)="submit()" novalidate>
        <div class="edit-wrapper">
          <ion-grid>
            <ion-row>
              <ion-col col-12 class="edit-wrapper__outercol">
                <ion-row>
                  <ion-col col-12>
                      <app-field-error-display [displayError]="isFieldValid('userName')" errorMsg="Username is required"></app-field-error-display>
                      <input [(ngModel)]="muserName" formControlName="userName" placeholder="Username" class="form-field" required [ngClass]="displayFieldCss('userName')"/>
                  </ion-col>
                  <ion-col col-12 *ngIf="!editUserFlag">
                      <app-field-error-display [displayError]="isFieldValid('password')"errorMsg="Password does not meet criteria"></app-field-error-display>
                      <p class="password-class">Password must contain three of the following: Capital Letters, Lower Case Letters, Numbers, Special Characters and must be 8 characters in length.</p>
                      <input type="password" [(ngModel)]="mpassword" formControlName="password" class="form-field" placeholder="Password" required [ngClass]="displayFieldCss('password')"/>
                  </ion-col>
                  <ion-col col-12 *ngIf="!editUserFlag">
                      <app-field-error-display [displayError]="isFieldValid('passwordConfirm')" errorMsg="Match Password"></app-field-error-display>
                      <input type="password" [(ngModel)]="mpasswordConfirm" formControlName="passwordConfirm" class="form-field" placeholder="Confirm Password" required [ngClass]="displayFieldCss('passwordConfirm')"/>
                  </ion-col>
                </ion-row>
              </ion-col>
            </ion-row>
          </ion-grid>
          <button full ion-button class="edit-wrapper__button"><span *ngIf="editUserFlag">Update</span><span *ngIf="!editUserFlag">Create</span></button>
        </div>
      </form>

【问题讨论】：

您可以将editUserFlag 参数传递给您的验证器。当editUserFlag 为真时，在验证器中忽略。

标签： angular forms typescript ionic-framework angular2-forms

【解决方案1】：

不需要两种形式。您只能使用一种表单来创建和更新。只需要更改验证。例如，

ngOnInit(){
this.form= this.formBuilder.group({
    userName: [this.userName],
    password: [this.password],
    passwordConfirm: this.passwordConfirm,

  },{
    validator: ConfirmPasswordValidator.MatchPassword // your validation method
  })

}

onCreateUser(){
  this.form.controls["password"].setValidators([Validators.required]);
  this.form.controls["password"].updateValueAndValidity();
  this.form.controls["passwordConfirm"].setValidators([Validators.required]);
  this.form.controls["passwordConfirm"].updateValueAndValidity();
}

onUpdateUser(){
  this.form.controls["password"].setValidators(null);
  this.form.controls["password"].updateValueAndValidity();
  this.form.controls["passwordConfirm"].setValidators(null);
  this.form.controls["passwordConfirm"].updateValueAndValidity();
}

您可以根据您的场景动态调用这些方法。

【讨论】：