Technicalarticles
角度设计
模板驱动-在模板驱动的表单中，可以更好地控制角度模板。该模板非常强大，并且具有Angular框架内置的大多数功能。我们只需要手工设计出干净整洁的HTML。我自由也正在使用这种方法。 反应形式-同样非常强大，大多数控件位于组件中。需要Formbuilder来构建表单。
构建动态组件
模型设计
export interface productFeatures{ featureName:string, featureAddedDate:string, featureDescription?:string}export interface Product<productFeatures> { id: number | null; productName: string; productCode: string; description?: string; productFeatures?: productFeatures[];} export const products: Product<productFeatures>[] = [ { id: 1, productName: 'Netgear Cable Modem', productCode: 'CM700', description: 'Netgear Cable Modem compatible with all cables', productFeatures: [{ featureName:"", featureAddedDate:"", featureDescription:"" }] }, ];<app-product-feature> </ app-product-feature>
<app-product-feature（parentProductFields）=“ parentProductFields（$ event）”> </ app-product-feature>
productField: Product<productFeatures> = {} as Product<productFeatures>;parentProductFields(value) {console.log(`calling hour recieved from parent is ${JSON.stringify(value)}`)this.productField = value;}@Output() parentProductFields = new EventEmitter<Product<productFeatures>>()
productField: Product<productFeatures> = {id: 1,productName: ‘’,productCode: ‘’,description: ‘’,productFeatures: [{featureName:””,featureAddedDate:””,featureDescription:””}]}import { Component, Input, Output,EventEmitter } from '@angular/core';import {Product,productFeatures} from './product';@Component({ selector: 'app-product-feature', templateUrl: "./product-feature.component.html"})export class ProductFeatureComponent {@Input() childProductField: Product<productFeatures>;@Output() parentProductFields = new EventEmitter<Product<productFeatures>>(); productField: Product<productFeatures> = { id: 1, productName: '', productCode: '', description: '', productFeatures: [{ featureName:"", featureAddedDate:"", featureDescription:"" }] }addNewProdField(index: number): void {let prod: productFeatures = {"featureName": "","featureAddedDate": "","featureDescription": "" } ;this.productField.productFeatures.push(prod);console.log(`In method addNewProdField field index is ${index} and field is ${JSON.stringify(JSON.stringify( this.productField))}`);this.parentProductFields.emit(this.productField); } removeNewProdField(index: number): void {this.productField.productFeatures.splice(index, 1);console.log(`In method addNewProdField field index is ${index}`);this.parentProductFields.emit(this.productField); }}<tbody><ng-template ngFor let-prod [ngForOf]=”productField.productFeatures” let-i=”index”><tr><td><!-- Product feature here --><td></tr></ng-template></tbody>
<td><input class=”form-control minimal” id=”{{featureAddedDate + prod}}”[(ngModel)]=”prod.featureAddedDate”></td><h5>Product component</h5><div> <div> </div></div><div> <div> </div></div><div class="row required-field"> <div> <label>Product Name</label> <input class="form-control minimal" id="productName" [(ngModel)]="productField.productName"> </div></div><div> <div> </div></div><div class="row required-field"> <div> <label>Product Code</label> <input class="form-control minimal" id="productCode" [(ngModel)]="productField.productCode"> </div></div><div> <div> </div></div><label>Product Features</label><div> <div> </div></div><table id="callingHours-id" style="background-color: white;"> <thead> <tr> <th style="width: 30%;">Feature Name</th> <th>Feature Date</th> <th>Feature Description</th> </tr> </thead> <tbody> <ng-template ngFor let-prod [ngForOf]="productField.productFeatures" let-i="index"> <tr> <td> <input class="form-control minimal" id="{{name + prod}}" [(ngModel)]="prod.featureName"> </td> <td> <input class="form-control minimal" id="{{featureAddedDate + prod}}" [(ngModel)]="prod.featureAddedDate"> </td> <td> <input class="form-control minimal" id="{{featureDescription + prod}}" [(ngModel)]="prod.featureDescription"> </td> <td> <ng-container> <button id="{{'remoeMinus' +i}}" class="btn btn-xs btn-danger" (click)="removeNewProdField(i)"> <i class="fa fa-minus"></i> </button> </ng-container> <ng-container> <button id="{{'addrec'+ i }}" class="btn btn-xs btn-primary" (click)="addNewProdField(i)"> <i class="fa fa-plus"></i> </button> </ng-container> </td> </tr> </ng-template> </tbody></table>
添加产品功能
addNewProdField(index: number): void {let prod: productFeatures = {“featureName”: “”,“featureAddedDate”: “”,“featureDescription”: “”} ;this.productField.productFeatures.push(prod);console.log(`In method addNewProdField field index is ${index} and field is ${JSON.stringify(JSON.stringify( this.productField))}`);this.parentProductFields.emit(this.productField);}
删除产品功能
removeNewProdField(index: number): void {this.productField.productFeatures.splice(index, 1);console.log(`In method addNewProdField field index is ${index}`);this.parentProductFields.emit(this.productField);}<pre>{{productField | json}}</ pre>{ "id": 1, "productName": "Netgear Wireless Router", "productCode": "NG123", "description": "", "productFeatures": [ { "featureName": "capacity", "featureAddedDate": "05/01/2020", "featureDescription": "123" }, { "featureName": "range", "featureAddedDate": "05/01/2020", "featureDescription": "123" } ]}
总结
演示地址：https://stackblitz.com/edit/angular-dynamic-component-1-h6hxos
英文 | https://medium.com/javascript-in-plain-english/how-to-create-a-complex-dynamic-form-in-angular-19a472af6060
