Question

我正在创建一个表单。此表单有两个目的。如果用户选择创建用户，则会显示密码输入。如果用户编辑了用户，则不会显示密码输入。由于我的验证，我不得不创建两个单独的表单组。（creationForm / editForm）。问题是我不能在（表单[formGroup]）上使用三元操作，不确定如何告诉我的观点它需要在某个表单上运行。

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

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

TS

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>

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

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

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

1 个答案: