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

我正在创建一个表单。这种形式有两个目的。如果用户选择创建用户，则会显示密码输入。如果用户是用户，则不会显示密码输入。由于我的验证，我不得不创建两个单独的FormGroup。（creationForm/editForm）。问题是我不能在（form[formGroup]）上使用三元运算，不确定如何告诉我的观点它需要在特定的表单上进行运算

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

p、 它不显示验证等。。在typescript中，与此问题无关。谢谢

Ts

HTML

密码必须包含以下三个字符：大写字母、小写字母、数字、特殊字符，长度必须为8个字符
更新创建

不需要两种形式。创建和更新只能使用一个表单。只需要更改验证。比如说,

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

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

}

---

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

您可以将

editUserFlag

参数传递给验证器。在验证程序中，当

editUserFlag

为true时忽略。

<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>

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