Angular4点击按钮显示表单问题求助：表单与按钮同时显示

我来帮你搞定这个问题！你遇到的核心问题是没有给表单添加条件渲染逻辑，导致页面加载时表单和按钮一起显示了。咱们用Angular的*ngIf指令就能轻松实现「点击注册按钮才显示表单」的需求，具体步骤如下：

1. 修改组件类（app.component.ts） #

首先在组件里添加一个布尔变量来控制表单的显示状态，再写一个点击按钮触发的方法来切换这个状态：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; // 模型驱动表单必备导入
import { MyserviceService } from './servicecomponent/myservice.service';
import 'rxjs/add/operator/...'; // 保留你原本的rxjs操作符导入

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 新增：控制表单显示的变量，初始为false（隐藏表单）
  showForm: boolean = false;
  // 模型驱动表单的FormGroup实例
  registerForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private myService: MyserviceService
  ) { }

  ngOnInit() {
    // 初始化你的模型驱动表单（保留你原本的表单验证逻辑）
    this.registerForm = this.formBuilder.group({
      username: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
      // 其他表单控件按你的需求添加
    });
  }

  // 新增：点击注册按钮时触发的方法，显示表单
  onShowRegisterForm() {
    this.showForm = true;
  }

  // 你的表单提交方法（如果有的话）
  onSubmit() {
    if (this.registerForm.valid) {
      // 处理表单提交逻辑，比如调用你的service
      this.myService.submitForm(this.registerForm.value).subscribe(
        response => console.log('注册成功', response),
        error => console.error('注册失败', error)
      );
    }
  }
}

2. 修改模板文件（app.component.html） #

给按钮绑定点击事件，给表单添加*ngIf指令控制显示：

<!-- 注册按钮：点击后触发显示表单的方法 -->
<button (click)="onShowRegisterForm()" class="btn btn-primary">注册</button>

<!-- 模型驱动表单：只有当showForm为true时才显示 -->
<form *ngIf="showForm" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label>用户名</label>
    <input type="text" formControlName="username" class="form-control" />
    <!-- 表单验证错误提示（可选） -->
    <div *ngIf="registerForm.get('username').invalid && registerForm.get('username').touched">
      用户名不能为空
    </div>
  </div>

  <div class="form-group">
    <label>邮箱</label>
    <input type="email" formControlName="email" class="form-control" />
    <div *ngIf="registerForm.get('email').invalid && registerForm.get('email').touched">
      请输入有效的邮箱地址
    </div>
  </div>

  <div class="form-group">
    <label>密码</label>
    <input type="password" formControlName="password" class="form-control" />
    <div *ngIf="registerForm.get('password').invalid && registerForm.get('password').touched">
      密码长度不能少于6位
    </div>
  </div>

  <button type="submit" [disabled]="!registerForm.valid" class="btn btn-success">提交注册</button>
</form>

3. 确保模块导入了ReactiveFormsModule #

因为你用的是模型驱动表单（响应式表单），必须在app.module.ts里导入ReactiveFormsModule，否则表单会失效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // 必须导入这个
import { HttpClientModule } from '@angular/common/http'; // 如果用到http请求的话

import { AppComponent } from './app.component';
import { MyserviceService } from './servicecomponent/myservice.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule, // 加入这里
    HttpClientModule // 如果你的service用到http的话
  ],
  providers: [MyserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样修改之后，页面加载时只会显示「注册」按钮，点击按钮后才会渲染出模型驱动表单，完美符合你的需求~

内容的提问来源于stack exchange，提问作者user9630712