Question

我是角色的新手，并试图实现一个反应形式。下面是我的html代码和TS代码

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="email">Mail</label>
    <input type="email" name="email" id="email" formControlName="email" class="form-control">
  </div>
  <div class="btn btn-primary" type="submit">Sign Up</div>
</form>

这是我的TS文件

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent    implements OnInit{
  title = 'app works!';
  signupForm : FormGroup;

  ngOnInit(){
    this.signupForm =  new FormGroup({
      'email' : new FormControl('test@test.com')

    });

    // this.signupForm.valueChanges.subscribe(
    //   (value) => console.log(value)
    // );
  }


  onSubmit(){
    console.log(this.signupForm);
  }

}

出于某种原因，我无法在OnSubmit方法中尝试在控制台上打印任何内容。我检查了一切，它看起来没问题，但是当按下按钮时，控制台上仍然没有任何内容。谁能帮助我，我做错了什么？

Answer 1

属性类型不是div元素的有效类型。在这种情况下，您需要有一个输入或按钮类型提交，以便触发回调。

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="email">Mail</label>
             <input type="email"
                 name="email"
                 id="email"
                 formControlName="email"
                 class="form-control">
    </div>
    <button class="btn btn-primary" type="submit">Sign Up</button>
</form>

无法打印到控制台

1 个答案: