将字符串数组循环到文本框和 post 从提交表单更改 angular 7
Loop a array of string to a text box and post from a submit form with the changes angular 7
您好,我确定之前有人问过这个问题,但我无法在这里找到答案。
我有一个字符串数组,它是循环的,并在提交表单时呈现为表单内的文本框,所有具有新更改值的值都应提交给 onSubmit()
<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<input type="text" class="form-control" name="caption" [(ngModel)]="blockdummyJson.Properties.Caption" #Caption="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && Caption.invalid }" required />
<div *ngIf="f.submitted && Caption.invalid" class="invalid-feedback">
<div *ngIf="Caption.errors.required">radio button caption is required</div>
</div>
<input type="button" value="addOption" (click)="addOptionToRadioOption()" />
<div *ngFor="let option of blockdummyJson.Properties.Options; let i = index">
<input type="text" class="form-control" [(ngModel)]="blockdummyJson.Properties.Options[i]" />
</div>
<div class="form-group">
<button class="btn btn-primary">Add</button>
</div>
</form>
在侧面组件
radioOption:any=[];
data: any;
blockdummyJson: any;
blockName: string = 'OptionBuildingBlock';
activityInfo: any;
constructor(private messageservice: MessageService,
private httpservice: ConfigService,
private communicationservice: CommunicationService, ) {
var self = this;
this.activityInfo = this.data;
this.httpservice.getConfig(ConfigValue.apiURI + 'BuildingBlocks/' + this.blockName).subscribe(
data => {
self.blockdummyJson = data;
},
err => { },
() => console.log('getting BuildingBlocks config completed')
)
}
addOptionToRadioOption()
{
this.blockdummyJson.Properties.Options.push("sample Value");
}
onSubmit() {
debugger;
}
来自服务器的数据选项包括数组
Options=['test','test1',test2'];
提前致谢。
您已经拥有两种数据绑定方式,每次用户输入时,它都会更新为 DOM。您不依赖于 ngForm,而是使用 modelObj。
export class AppComponent {
name = 'Angular';
blockdummyJson = {
Properties: {
Options :['test','test1','test2'],
Caption: ''
}
};
addOptionToRadioOption()
{
this.blockdummyJson.Properties.Options.push(this.blockdummyJson.Properties.Caption);
}
onSubmit(formObj){
console.log(this.blockdummyJson);
}
模板:
<form name="form" (ngSubmit)="f.valid && onSubmit(f)" #f="ngForm" novalidate>
<input type="text" class="form-control" name="caption" [(ngModel)]="blockdummyJson.Properties.Caption" #Caption="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && Caption.invalid }" required />
<div *ngIf="f.submitted && Caption.invalid" class="invalid-feedback">
<div *ngIf="Caption.errors.required">radio button caption is required</div>
</div>
<input type="button" value="addOption" (click)="addOptionToRadioOption()" />
<div *ngFor="let option of blockdummyJson.Properties.Options; let i = index">
<input type="text" name="options-{{i}}" class="form-control" [(ngModel)]="blockdummyJson.Properties.Options[i]" />
</div>
<div class="form-group">
<button class="btn btn-primary">Add</button>
</div>
</form>
StackBlitz: https://stackblitz.com/edit/angular-vsxwuy
您好,我确定之前有人问过这个问题,但我无法在这里找到答案。 我有一个字符串数组,它是循环的,并在提交表单时呈现为表单内的文本框,所有具有新更改值的值都应提交给 onSubmit()
<form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
<input type="text" class="form-control" name="caption" [(ngModel)]="blockdummyJson.Properties.Caption" #Caption="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && Caption.invalid }" required />
<div *ngIf="f.submitted && Caption.invalid" class="invalid-feedback">
<div *ngIf="Caption.errors.required">radio button caption is required</div>
</div>
<input type="button" value="addOption" (click)="addOptionToRadioOption()" />
<div *ngFor="let option of blockdummyJson.Properties.Options; let i = index">
<input type="text" class="form-control" [(ngModel)]="blockdummyJson.Properties.Options[i]" />
</div>
<div class="form-group">
<button class="btn btn-primary">Add</button>
</div>
</form>
在侧面组件
radioOption:any=[];
data: any;
blockdummyJson: any;
blockName: string = 'OptionBuildingBlock';
activityInfo: any;
constructor(private messageservice: MessageService,
private httpservice: ConfigService,
private communicationservice: CommunicationService, ) {
var self = this;
this.activityInfo = this.data;
this.httpservice.getConfig(ConfigValue.apiURI + 'BuildingBlocks/' + this.blockName).subscribe(
data => {
self.blockdummyJson = data;
},
err => { },
() => console.log('getting BuildingBlocks config completed')
)
}
addOptionToRadioOption()
{
this.blockdummyJson.Properties.Options.push("sample Value");
}
onSubmit() {
debugger;
}
来自服务器的数据选项包括数组
Options=['test','test1',test2'];
提前致谢。
您已经拥有两种数据绑定方式,每次用户输入时,它都会更新为 DOM。您不依赖于 ngForm,而是使用 modelObj。
export class AppComponent {
name = 'Angular';
blockdummyJson = {
Properties: {
Options :['test','test1','test2'],
Caption: ''
}
};
addOptionToRadioOption()
{
this.blockdummyJson.Properties.Options.push(this.blockdummyJson.Properties.Caption);
}
onSubmit(formObj){
console.log(this.blockdummyJson);
}
模板:
<form name="form" (ngSubmit)="f.valid && onSubmit(f)" #f="ngForm" novalidate>
<input type="text" class="form-control" name="caption" [(ngModel)]="blockdummyJson.Properties.Caption" #Caption="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && Caption.invalid }" required />
<div *ngIf="f.submitted && Caption.invalid" class="invalid-feedback">
<div *ngIf="Caption.errors.required">radio button caption is required</div>
</div>
<input type="button" value="addOption" (click)="addOptionToRadioOption()" />
<div *ngFor="let option of blockdummyJson.Properties.Options; let i = index">
<input type="text" name="options-{{i}}" class="form-control" [(ngModel)]="blockdummyJson.Properties.Options[i]" />
</div>
<div class="form-group">
<button class="btn btn-primary">Add</button>
</div>
</form>
StackBlitz: https://stackblitz.com/edit/angular-vsxwuy