如何在Angular 9中点击按钮后显示表单？

问题描述 投票：-2回答：1

我的页面上有一个按钮，当我点击它时，我想让我的表单显示在它的正下方.我还想知道我点击按钮的次数，它应该显示那么多表单。

我是新来的 Angular 9 却不知道如何将表单与按钮显示在同一页面上。

按钮的代码。

<html>
  <body ng-app>
    <button type="submit" (click)="onClickForm" > Next </button>
  </body>
</html>

表格的代码：

<html>
<form>
  First Name: <input type="text" ng-model="firstname">
</form>
html angular angularjs-directive
1个回答
1
投票

解决方案是为ANGULARJS提供的

鉴于 

<html>
  <body ng-app>
      <button type="submit" ng-click="onClickForm()" ng-show="!showForm"> 
         Next 
      </button>        
      <form ng-show="showForm">
         First Name: <input type="text" ng-model="firstname">
      </form>  
   </body>
</html>

in js 控制器

$scope.showForm= false;

$scope.onClickForm = function(){
    $scope.showForm = true;
}
0
投票

我想这就是你要找的。

你可以用 Reactive Forms 和 FormArray 如果你想要一系列的 First Names 或 users.你可以找到一个清晰的教程 此处.工作中的StackBlitz可以找到 此处.

  • 在您的ts文件中
import { Component, VERSION,OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  userForm: FormGroup;
  users: FormArray
  constructor(private fb: FormBuilder){}

  ngOnInit(): void{
    this.userForm = this.fb.group({
      users: this.fb.array([])
    })
  }

  createUserForm(){
    return this.fb.group({
      firstname: ''
    })
  }

  adduser(){
    this.users = this.userForm.get('users') as FormArray;
    this.users.push(this.createUserForm());
  }
}
  • 在你的html文件中
<button (click)="adduser()"> next </button>


<form [formGroup]="userForm">
  <div formArrayName="users" *ngFor="let item of userForm.get('users')['controls']; let i = index;">
      <div [formGroupName]="i">
          <input formControlName="firstname" placeholder="firstname">
    </div>
      </div>
</form>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.