角反應式表單按鈕單擊事件

Question

我想用反應性表格方法創建完整的動態表格。

您能否幫助我創建一個帶有按鈕，日期控件和下拉列表的表單組，以及如何將事件與每個控件相關聯。

假設在我的表單中有5個按鈕，如何將不同的事件綁定到每個按鈕。

Answer 1

如下使用。 當您在窗體上的任何地方單擊時，將觸發此操作。 HTML：

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

TS：

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

Answer 2

你可以參考這個例子

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>

TS：

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);
  }
}