Angular 角度反应窗体按钮单击事件

我想创建完整的动态形式的角度与反应形式的方法

您能帮我创建一个带有按钮、日期控件和下拉列表的表单组，以及如何将事件关联到每个控件吗

假设在我的表单中有5个按钮，如何将不同的事件绑定到每个按钮。

您可以参考这个

HTML:

输入文本：
选择日期：
所选日期：{basicForm.get（'userDate'）.value}
输入号码：
{{gen}
提交表格
清晰的形式
表单数据：{{basicForm.value | json}

TS:

从'@angular/core'导入{Component，OnInit}；
从“@angular/forms”导入{FormBuilder、FormGroup、Validators}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
基本形式：FormGroup；
下拉列表：数组=[
“男性”、“女性”、“其他人”
]
构造函数（私有fb:FormBuilder）{
}
恩戈尼尼特（）{
这个.createForm（）；
}
createForm（）{
this.basicForm=this.fb.group({
userText:[空，验证器。必需]，
userNum:null，
userDate:[空，验证器。必需]，
性别：[“男性”，验证器。必填]，
})
}
日期更改（事件）{
console.log（事件）；
this.basicForm.get（'userDate'）.setValue（event.target.value）
}
提交（）{
console.log（this.basicForm.value）；
}
}

如下所示。当您单击表单上的所有位置时，将触发此操作。 HTML:

---

我们可以动态创建按钮并动态添加点击事件吗？请举例？？嘿，你能详细说明一下你的答案吗？

<form [formGroup]="basicForm" (ngSubmit)="submit()" novalidate autocomplete="off">
    <div>
        <label>Enter Text: </label>
        <input placeholder="Enter Text" formControlName="userText" />
    </div>
    <div>
        <label>Select Date:  </label>
        <input type="date" (change)="dateChange($event)" placeholder="select date" formControlName="userDate">

        <label>  Selected Date:  {{basicForm.get('userDate').value}}</label>
    </div>

    <div>
        <label>Enter Number: </label>
        <input placeholder="Enter Text" formControlName="userNum" />
    </div>

    <div>
        <select formControlName="gender">
      <option *ngFor ="let gen of dropDown">
        {{gen}}
      </option>
    </select>
    </div>

    <div>
        <button type="submit" [disabled]="!basicForm.valid">Submit Form</button>
    </div>

    <div>
        <button (click)="basicForm.reset()">Clear Form</button>
    </div>
</form>
<div *ngIf="basicForm.valid">
    Form Data: {{basicForm.value | json}}

</div>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  basicForm: FormGroup;

  dropDown: Array<any> = [
    'Male', 'Female', 'Others'
  ]

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.basicForm = this.fb.group({
      userText: [null, Validators.required],
      userNum: null,
      userDate: [null, Validators.required],
      gender: ['Male', Validators.required],
    })
  }

  dateChange(event) {
    console.log(event);
    this.basicForm.get('userDate').setValue(event.target.value)
  }

  submit() {
    console.log(this.basicForm.value);
  }
}

<form [formGroup]="myForm" (click)="clickedMe()">
</form>

clickedMe(){
  alert("clicked me");
}