Как вывести форму после нажатия кнопки в Angular 9? - PullRequest
Новая
       22

Как вывести форму после нажатия кнопки в Angular 9?

0 голосов
/ 17 июня 2020

У меня есть кнопка на моей странице, и когда я нажимаю на нее, я хочу, чтобы моя форма отображалась прямо под ней. Я также хочу, сколько раз я нажимаю кнопку, это должно показать столько форм.

Я новичок в 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>

Ответы [ 2 ]

1 голос
/ 17 июня 2020

РЕШЕНИЕ ДЛЯ 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>

в js Контроллер 

$scope.showForm= false;

$scope.onClickForm = function(){
    $scope.showForm = true;
}
0 голосов
/ 17 июня 2020

Я думаю, это то, что вы ищете.

Вы можете использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...