Форма создания пользователя - обновление и создание - с использованием различных входов. Угловой 2+ - PullRequest
Новая
       17

Форма создания пользователя - обновление и создание - с использованием различных входов. Угловой 2+

0 голосов
/ 02 мая 2018

Я создаю форму. Эта форма имеет две цели. Если пользователь выбирает создать пользователя, появляются вводимые пароли. Если пользователь редактирует пользователя, ввод пароля не отображается. Из-за моей проверки мне пришлось создать две отдельные формы. (creationForm / editForm). Проблема в том, что я не могу использовать троичную операцию (form [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>

1 Ответ

0 голосов
/ 02 мая 2018

Нет необходимости в двух формах. Вы можете использовать только одну форму для создания и обновления. Просто нужно изменить проверки. Например, 

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

Вы можете вызывать эти методы на основе вашего сценария динамически.

...