时间戳

首页 > 解决方案 > 从子组件获取值到父组件

angular - 从子组件获取值到父组件

问题描述

我正在尝试将值从子组件传递给父组件。我的组件是名称详细信息组件，它是父组件和密码组件，它是子组件。我需要的值是密码和 otp。请注意，otp 不是表单控件的一部分。

这是我的代码

密码组件表单

<form [formGroup]="passwordForm">
  <div class="password" *ngIf="!showOTP">
    <label>Password</label>
    <input type="password" formControlName="password" placeholder="Should be 8 characters long">
  </div>
  <div class="confirmPassword" *ngIf="!showOTP">
    <label>Confirm password</label>
    <input type="password" formControlName="confirmPassword" placeholder="Should be 8 characters long">
  </div>
  <div class="otp" *ngIf="showOTP">
    <label>OTP</label>
    <input type="text" placeholder="Enter OTP">
  </div>
</form>
<button *ngIf="!showOTP" (click)="passwordsConfirmed()" class="secondary small"> Send OTP </button>
<button *ngIf="showOTP" (click)="onUpdatePassword()" class="secondary small"> UPDATE PASSWORD</button>

密码组件 ts

  @Output() changePassword = new EventEmitter<string>();
  @Output() otp = new EventEmitter<string>();

passwordsConfirmed(){
  this.password = this.passwordForm.controls.password.value;
  this.confirmPassword = this.passwordForm.controls.confirmPassword.value;

  if (this.passwordForm.valid && this.password === this.confirmPassword) {
    this.changePassword.emit(this.password);
    this.showOTP = !this.showOTP;
  } else {
    this._errorService.openErrorPopup('Please enter valid matching passwords.');
  }
}

  onUpdatePassword() {
    this.otp.emit(this.otpFieldValue);
  }

详细信息 div

  <div class="ui-g-4">
    <app-profile-change-password
      (changePassword)="onChangePassword($event)"
    ></app-profile-change-password>
    <div class="button-container">
      <button class="main right" (click)="onSaveChanges()">
        SAVE CHANGES
      </button>
    </div>
  </div>

细节组件 ts

  onChangePassword() {
    this._profileService.resendAFOPin(this.username, 'mobile')
      .subscribe((resp) => {
        this._notificationService
          .openNotification('Access code has been sent. An sms has been sent to the new user');
          console.log(this.confirmPassword);
      }, (error) => {
        this._errorService.openErrorPopup('Failed to send code.');
      });
  }

  private changePassword() {
    this._confirmationService.confirm({
      header: 'Change password',
      message: 'Are you sure you want to update your password?',
      acceptLabel: 'YES, UPDATE',
      rejectLabel: 'NO, CANCEL',
      icon: null,
      accept: () => {
        this._profileService.completePasswordChange(this.username, 'otp','mobile')
        .subscribe((resp) => {
          this._notificationService
            .openNotification('Password has been changed.');
        }, (error) => {
          this._errorService.openErrorPopup('Failed to update password.');
        });
      }
    });
  }

我现在如何获得详细信息组件中的 2 个值？

标签： angular

解决方案

otp由于您仅绑定更改密码，因此您变得不确定。对otp:

<app-profile-change-password (otp)="otpChanged($event)"
      (changePassword)="onChangePassword($event)">
</app-profile-change-password>

定义你自己的otpChanged()

推荐阅读