Question

似乎我的问题的一部分是东西的装载方式。当我在构造函数中调用createForm函数时，它会尝试访问this.paswdProfile.numbers和其他变量（它们是ngOnInit的一部分，尚不可用），因此会失败。如果我将表单移至ngOnInit，它会抱怨没有FormGroup等。那么，如何确保在passwdProfile包含数据之后创建表单字段？

import {IBucket} from '../../../../models/bucket';
import { Component, OnInit, Inject, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AdminService  } from '../../../../services/admin.service';
import { MAT_DIALOG_DATA,  MatDialog, MatDialogRef  } from '@angular/material';
import { Observable } from 'rxjs';
import { CouchbaseLookupService} from '../../../../services/couchbase-lookup.service';
import { takeWhile } from 'rxjs/operators';
import { ToasterService} from 'angular2-toaster';
import { CustomValidators } from './custom-validators';
import { IPasswordProfile } from '../../../../models/admin'



@Component({
  selector: 'app-password',
  templateUrl: './password.component.html',
  styleUrls: ['./password.component.scss']
})
export class PasswordComponent implements OnInit {
    public passwordForm: FormGroup;
    alive = true;

    paswdProfile$: Observable<IPasswordProfile>
    paswdProfile: IPasswordProfile

    constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<PasswordComponent>,
    private adminService: AdminService, private route: ActivatedRoute, private cbLookupService: CouchbaseLookupService,
    private router: Router, private dialog: MatDialog, private toasterService: ToasterService, private fb: FormBuilder) {
this.passwordForm = this.createPasswordForm()
     }



ngOnInit() {
    this.paswdProfile$ = this.adminService.getPasswordProfile("8084ea42-633e-4c28-bc7a-372aa58a4d1c")
    this.paswdProfile$.subscribe(res => {this.paswdProfile = res[0]})
    console.log(this.paswdProfile)
}

createPasswordForm(): FormGroup {
    return this.fb.group(
      {
        oldPassword : [ null, Validators.compose([Validators.required])],
        newPassword: [
          null,
          Validators.compose([
            Validators.required,
            // check whether the entered password has a number
            CustomValidators.patternValidator(/\d/g, this.paswdProfile.numbers , {
              hasNumber: true
            }),
            // check whether the entered password has upper case letter
            CustomValidators.patternValidator(/[A-Z]/g, this.paswdProfile.upperCase, {
              hasCapitalCase: true
            }),
            // check whether the entered password has a lower case letter
            CustomValidators.patternValidator(/[a-z]/g, this.paswdProfile.lowerCase,  {
              hasSmallCase: true
            }),
            // check whether the entered password has a special character
            CustomValidators.patternValidator(
              /[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/g, this.paswdProfile.specialChar ,
              {
                hasSpecialCharacters: true
              }
            ),
            Validators.minLength(this.paswdProfile.minChar)
          ])
        ],
        confirmPassword: [null, Validators.compose([Validators.required])]
      },
      {
        // check whether our password and confirm password match
        validator: CustomValidators.passwordMatchValidator
      }
    );
  }


}

Answer 1

您没有对该对象的引用。您将获得对Observable的引用。您需要订阅Observable并存储结果。这是异步完成的。

this.adminService.getPasswordProfile("8084ea42-633e-4c28-bc7a-372aa58a4d1c")
    .subscribe(profile => this.paswdProfile$ = profile);

Answer 2

如果要在模板中使用值，则为了访问可观察的值，您需要使用https://angular.io/api/common/AsyncPipe。

如果要在.ts文件中访问它，则需要订阅它并等待其解决，例如：

this.paswdProfile$.subscribe(profile => {
    const numbers = profile.numbers;
});

TS2339属性XXX的问题在Observable类型上不存在

2 个答案: