为什么onCompleted for Observable没有形式的值?

时间:2019-02-06 18:26:56

标签: angular typescript rxjs observable angular-reactive-forms

目标:我想在Angular反应式表单上获得输入的值。 我看到除非进行超时,否则它为null,因此我尝试使用可观察对象的 onCompleted ()

根据RXJS Observable doSomething onCompletehttps://angular.io/api/forms/FormGroup#addcontrol

我认为我需要使用addControl方法。但是我无法获取该值(它以null的形式打印到控制台)

ngOnInit() {
    GetUserProfile();
}

public GetUserProfile()
{
    this.aa.GetProfile(id).subscribe(resp => {
        this.user = resp;           

        this.aa.GetPref(id).subscribe(resp =>{
            this.email = resp.Email;

            // Form Configuration
            this.createForm();                
            this.isLoaded = true;                   
        })
    },

    err => {
            console.log(err);
    },

    () => {
            console.log("On completed?");
            this.spanish = (<HTMLInputElement>document.getElementById("spanish2")).value
            console.log(this.spanish);
                this._profileForm.addControl('spanish3', new FormControl(this.spanish) );
          }
    );
}

createForm() {
                this._pForm = this.fb.group({
                            'spanish2': new FormControl()
                });
}

实际结果:它打印出“完成时吗?”,但同时指出:“无法读取null的属性'value'值'”

this.spanish = (<HTMLInputElement>document.getElementById("spanish2")).value  

预期,使其具有当前值。仅在使用setTimeout时有效。

HTML:

<mat-card class="patient-card">
    <mat-card-title class="text-center">
        My Profile
    </mat-card-title>
    <mat-card-content>

        <div fxLayoutAlign="center center" *ngIf="!isLoaded">
                <mat-spinner></mat-spinner>
        </div>

        <div *ngIf="isLoaded">
                <form [formGroup]="_pForm" novalidate>
                   <mat-form-field class="input-width" [class.hide-element]="true">
                        <input matInput placeholder="Spanish" id="spanish2" formControlName="spanish2" i18n-value="@@AiBrErQv_G2_91" value="Spanish">
                   </mat-form-field>                                
                </form>
        </div>

    </mat-card-content>
</mat-card>

0 个答案:

没有答案