angular 同页面不同表单间的数据添加

最新推荐文章于 2022-03-07 20:23:43 发布

原创最新推荐文章于 2022-03-07 20:23:43 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularl #不同表单间 #数据添加

本文介绍了如何在Angular应用中使用表单实现同页面内不同表单间的数据添加。通过创建FormGroup和使用FormControl，实现了表单字段的验证和数据绑定。当点击添加按钮时，将一个表单的数据添加到另一个表单的数据列表中，展示了Angular组件间数据交互的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.html文件：

<nz-table #basicTable nzBordered>

<tr>

<td>

<nz-form-item style="width: 400px;margin: 0">

<nz-form-control>

<nz-input-group>

</nz-input-group>

<nz-form-explain *ngIf="validateForm.get('regularName').dirty && validateForm.get('regularName').errors">必填项!</nz-form-explain>

</nz-form-control>

</nz-form-item>

</td>

</tr>

<tr>

<nz-select style="width: 200px;" [(ngModel)]="singleValue" [nzSize]="size" formControlName="matchmode">

<nz-option *ngFor="let option of listOfOption" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>

</nz-select>

</td>

</tr>

<tr>

<td>

<nz-form-item style="width: 400px;margin: 0">

<nz-form-control>

<nz-input-group>

</nz-input-group>

<nz-form-explain *ngIf="validateForm.get('matchitem').dirty && validateForm.get('matchitem').errors">必填项!</nz-form-explain>

</nz-form-control>

</nz-form-item>

</td>

</tr>

<tr>

</td>

</tr>

</td>

</tr>

<tr>

<td style="text-align: right">已添加的黑名单：</td>

<div>

<nz-table #secondTable nzBordered [nzData]="datas" style="">

<tr>

</tr>

<td>{{data.bidden}}</td>

</tr>

</nz-table>

</div>

</td>

</tr>

</nz-table>

</form>

.ts文件：

import { Component, OnInit } from '@angular/core';

import {

AbstractControl,

FormBuilder,

FormGroup,

Validators

} from '@angular/forms';

@Component({

selector: 'service',

templateUrl: './service.component.html',

styleUrls: ['./service.component.css']

})

export class ServiceComponent implements OnInit {

validateForm: FormGroup;

secondTable: FormGroup;

accountItem:any = {};

formData:any= {};

jinyong = true;

baojing = true;

listOfOption = [];

size = 'default';

singleValue = '服务名称';

multipleValue = [ '服务名称', '服务的显示名称', '服务的执行路径' ];

tagValue = [ '服务名称', '服务的显示名称', '服务的执行路径' ];

datas=[];

dataSet:any = {};

constructor(private fb: FormBuilder) { }

ngOnInit() {

this.validateForm = this.fb.group({

regularName: [ null, [ Validators.required ] ],

matchitem: [ null, [ Validators.required ] ],

matchmode: [ null, [ Validators.required ] ],

alert: [ null, [ Validators.required ] ],

forbidden: [ null, [ Validators.required ] ],

});

const children = [];

for (let i = 0; i < 4; i++) {

children.push({ label: this.multipleValue[i], value: this.tagValue[i]});

}

this.listOfOption = children;

}

//添加（主要的方法）

add(){

this.dataSet.name = this.validateForm.controls.regularName.value;

this.dataSet.item = this.validateForm.controls.matchitem.value;

this.dataSet.mode = this.validateForm.controls.matchmode.value;

this.dataSet.bidden = this.validateForm.controls.forbidden.value;

this.datas.push(this.dataSet);

this.datas = JSON.parse(JSON.stringify(this.datas));

console.log(this.datas);

}

submitForm(){

for (const i in this.validateForm.controls) {

this.validateForm.controls[ i ].markAsDirty();

this.validateForm.controls[ i ].updateValueAndValidity();

}