从子组件获取值到父组件答案

【问题标题】：get values from child component to parent component从子组件获取值到父组件
【发布时间】：2019-06-13 00:59:30
【问题描述】：

我正在尝试将值从子组件传递到父组件。我的组件是名称详细信息组件，它是父组件和密码组件，它是子组件。我需要的值是密码和 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 个值？

【问题讨论】：

你有什么错误吗？
@MaihanNijat 当我尝试控制台记录它时得到一个未定义的值console.log(this.confirmPassword);

标签： angular

【解决方案1】：

你得到otp undefined 因为你只绑定更改密码。对otp 执行相同操作：

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

定义你自己的otpChanged()

【讨论】：