Question

我正在尝试为表单上的一个输入创建异步验证器。这是简化版。

function asyncEmailExistsValidator(control: FormControl): Observable<any> {
    const value: string = control.value || '';
    let valid = true;
    if (value == 'johndoe@yahoo.com') {
        valid = false;
    }

    return Observable.of(valid ? null : { emailExists: true }).delay(5000);
}

在执行时我得到错误：错误类型错误：无法读取未定义的属性'。当我尝试调试时，我发现Observable未定义。

这是该组件的完整代码。

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, FormControl, Validators } from "@angular/forms";
import { Router, ActivatedRoute } from "@angular/router";

import { Observable } from 'rxjs/Observable';

import { CustomDataValidator } from "./../../services/validators/input-custom-validator";
import { AccountService } from "./../../services/account.service";

function asyncEmailExistsValidator(control: FormControl): Observable<any> {
    const value: string = control.value || '';
    let valid = true;
    if (value == 'johndoe@yahoo.com') {
        valid = false;
    }

    return Observable.of(valid ? null : { emailExists: true }).delay(5000);
}

@Component({
    selector: "email-change",
    templateUrl: "app/components/email-change/email-change.html",
    styleUrls: ["app/components/email-change/email-change.css"]
})

export class EmailChangeComponent implements OnInit {
    emailChangeForm: FormGroup;
    submitError: boolean = false;
    submitErrorMessage: string = "";
    oldEmail = this.activatedRoute.snapshot.params["email"];

    emailExists: boolean = false;
    emailConfirmClass: string = "";

    formValidationTest: boolean = true;

    constructor(private fb: FormBuilder, private router: Router, private dataValidator: CustomDataValidator,
        private activatedRoute: ActivatedRoute, private accountService: AccountService) { }

    ngOnInit(): void {
        this.emailChangeForm = this.fb.group({
            currentEmail: [{ value: this.oldEmail, disabled: true }, null ],
            newEmailAddress: ["",
                [
                    Validators.required,
                    Validators.pattern('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'),
                    asyncEmailExistsValidator
                ]
            ],
            newEmailAddressConfirm: ["", [Validators.required]]
        });
    }

    onSubmit = (): any => {
        this.accountService.changeEmail({
            oldEmailAddress: this.oldEmail, newEmailAddress: this.emailChangeForm.value.newEmailAddress
            })
            .subscribe((data: any) => {
                if (data.error === true) {
                    this.submitErrorMessage = data.errorMessage;
                    this.submitError = true;
                }
                else {
                    this.router.navigate(["my_profile"]);
                }
            });
    }

    onCancel = (): any => {
        this.router.navigate(["my_profile"]);
    }
}

这是我的package.json

{
  "version": "1.0.0",
  "name": "tech-services",
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@angular/upgrade": "^4.0.0",
    "bootstrap": "^3.3.7",
    "material-design-lite": "^1.3.0",
    "core-js": "^2.4.1",
    "moment": "^2.14.1",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.1.0",
    "systemjs": "^0.20.9",
    "zone.js": "^0.7.6"
  },
  "devDependencies": {
    "@types/core-js": "0.9.36",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.1",
    "gulp-less": "^3.3.0",
    "gulp-sourcemaps": "^2.4.0",
    "gulp-typescript": "^3.1.5",
    "gulp-uglify": "^2.0.0",
    "typescript": "^2.2.1",
    "typings": "2.1.0"
  }
}

Answer 1

导入以下模块

import 'rxjs/add/observable/of';

或者如果你正在使用其中许多，那么你可以使用

导入所有内容

import 'rxjs/Rx';

无法读取未定义的属性'of'

1 个答案: