Question

我正在尝试从Angular 8中的另一个组件设置FormGroup的值和组件的访问方法。但是调用方法会给我undefined。

第一个组件显示在下面。

import { Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  public loginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, [Validators.required]]
    });
  }

  onLogin() {
    console.error(this.loginForm.value);
  }

}

第二部分如下所示。

import { Component, OnInit, ViewChild } from '@angular/core';
import { LoginComponent } from '../modules/account/login/login/login.component';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements  OnInit {
   @ViewChild(LoginComponent, { static: false })
   private loginC: LoginComponent;

  constructor( ) { }

  ngOnInit() {
    this.loginC.loginForm.controls['email'].setValue('myEmail@domain.com');
    this.loginC.loginForm.controls['password'].setValue('myPassword');
    this.loginC.onLogin();
  }

}

我的LoginComponent将拥有自己的html和用户访问权限。在某些特殊情况下，我想使用自定义值动态登录。

我在这里还想念什么？

Answer 1

更好的方法是在服务中执行登录调用并将其注入登录组件中。

export class LoginComponent implements OnInit {
   ...
  constructor(private formBuilder: FormBuilder, private authService: AuthService) { }

  onLogin() {
    this.authService.login(this.loginForm.value);
  }
}

然后，您可以在任何组件或服务中注入AuthService并执行手动登录。

如何从Angular中的另一个组件设置FormGroup值

1 个答案: