当我单击表单内的任何按钮时，将执行表单内注册的所有功能。
item.components.ts
import { Component, OnInit } from '@angular/core';
import { ItemsService } from '../../share/items.service';
import { MatDialogRef } from '@angular/material';
import { Item } from 'src/app/model/item';
@Component({
selector: 'app-item',
templateUrl: './item.component.html',
styleUrls: ['./item.component.scss']
})
export class ItemComponent implements OnInit {
constructor(public service:ItemsService,
public dialogRef: MatDialogRef<ItemComponent>) { }
ngOnInit() { }
onSubmit(model: Item, isValid: boolean){
console.log('!!! submit !!!');
}
addProperty(){
console.log('!!! add prop !!!');
}
onClear(){
console.log('!!! clear !!!');
}
onClose(){
console.log('!!! close !!!');
}
}
项目.ts
export interface Item {
id: BigInteger | null
artNr: string;
name: string;
parentGroup: string;
childGroup: string;
properties: Array<{key: string, text: string}>;
}
items.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse} from '@angular/common/http';
import { Observable, from } from 'rxjs';
import { FormGroup, FormControl, Validators, FormBuilder, FormGroupDirective, FormArray } from '@angular/forms'
import { Address } from '../model/address';
import { Item } from '../model/item';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Authorization': 'my-auth-token'
})
};
interface ResponseItem{
results:Item[];
}
@Injectable({
providedIn: 'root'
})
export class ItemsService {
constructor(private http:HttpClient, private formBuilder:FormBuilder) { }
ngOnInit(){
this.initializeItemFormGroup();
}
//** ITEM AREA */
itemForm: FormGroup;
initializeItemFormGroup(){
this.itemForm = this.formBuilder.group({
id: [null],
artNr: ['', [Validators.required]],
name: ['', [Validators.required]],
parentGroup: ['', [Validators.required]],
childGroup: [''],
properties: this.formBuilder.array([this.addPropertyGroup()] )
});
}
addPropertyGroup(){
return this.formBuilder.group({
key: [''],
text: ['']
})
}
removeProperty(index){
this.property.removeAt(index);
}
addProperty() {
this.property.push(this.addPropertyGroup());
}
get property():FormArray {
return <FormArray>this.itemForm.get('properties');
}
}
item.component.html
<form [formGroup]="service.itemForm" class="normal-form" (ngSubmit)="onSubmit(service.itemForm.value, service.itemForm.valid)">
<mat-grid-list cols="2">
<mat-grid-tile>
<div class="controles-container">
<input type="hidden" formControlName="id" >
<mat-form-field>
<input formControlName="artNr" matInput placeholder="EA0123" >
<mat-error>Artikelnummer zwingend erforderlich</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="name" matInput placeholder="Artikelbezeichnung" >
<mat-error>Bezeichnung ist erforderlich</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="parentGroup" matInput placeholder="Karosserie" >
</mat-form-field>
<mat-form-field>
<input formControlName="childGroup" matInput placeholder="Schrauben" >
</mat-form-field>
</div>
</mat-grid-tile>
<mat-grid-tile>
<button mat-icon-button (click)="addProperty()"><mat-icon>add</mat-icon></button>
<div class="make-scrollable" formArrayName="properties">
<div *ngFor="let property of service.itemForm.controls.properties?.value; let i=index;" class="panel panel-default">
<ng-container [formGroupName]="i">
<mat-form-field>
<input formControlName="key" matInput placeholder="Titel" >
</mat-form-field>
<mat-form-field>
<input formControlName="text" matInput placeholder="Beschreibender Text" >
</mat-form-field>
</ng-container>
</div>
</div>
</mat-grid-tile>
<mat-grid-tile [colspan]="2">
<div class="buttom-row">
<button mat-raised-button color="primary" type="submit" [disabled]="service.itemForm.invalid">Speichern</button>
<button mat-raised-button color="warn" (click)="onClear()">Bereinigen</button>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
当我单击任何按钮时，控制台正在记录（目前我试图添加一个属性：（click）=“addProperty（）”）
控制台输出：
item.component.ts:32 !!! add prop !!!
item.component.ts:26 !!! submit !!!
item.component.ts:44 !!! close !!!
但我期望以下输出
控制台输出：
item.component.ts:32 !!! add prop !!!