如何使用数据用户输入表单来创建弹出窗口? [英] How do I create popup with data user enters into a form?
问题描述
<!--Currently making web app that is a bunch of forms.
我使用Angular 7使用Visual Studio 2017 ASP.NET Core 2.2创建的.当用户填写表格时,并非所有表格数据都是必需的.用户输入所需的表单信息后,我希望有一个按钮,弹出一个包含所有用户输入的数据和相应问题的弹出窗口.如果他们在表单上的文本框留空或输入n/a,我不希望该信息出现在弹出窗口中.我希望弹出窗口具有一个按钮,用于复制将粘贴到另一个站点上的表单中的数据.
I created using Visual Studio 2017 ASP.NET Core 2.2 with Angular 7. When user fills out form not all form data is required. After user enters desired form information I want there to be a button that brings up a popup that contains all user entered data and corresponding questions. If they leave a textbox on the form blank or enter n/a I do not want the information to appear in the popup. I want the popup to have a button to copy data that will be pasted into form on another site.
I have created all my forms and also know how to create a popup.
我唯一的问题是我不知道如何将用户输入的信息从表单填充/传输到弹出窗口,并排除用户未填写的文本框.-->
My only issue is I have no idea how to populate/transfer user entered information from form into the popup and excluding the text boxes not filled out by user.-->
<!-- this is th .html -->
<form [formGroup]="Form" (ngSubmit)="onSubmit()">
<div class="form-row align-items-center">
<div class="col-auto">
<br />
//
<div class="form-group">
<label for="Select1">Select your...</label>
<select class="form-control" formControlName="Select1">
<option>...</option>
<option>...</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label for="Number">some info </label>
<textarea class="form-control" formControlName="Number" rows="1" placeholder="Separate case numbers by comma"></textarea>
</div>
<div class="form-group">
<label for="Purpose">Purpose of info: </label>
<textarea class="form-control" formControlName="Purpose" rows="1"></textarea>
</div>
<div class="form-group">
<label for="name">Name of info: </label>
<textarea class="form-control" formControlName="name" rows="1"></textarea>
</div>
<
</div>
</div>
<p>
Form Value: {{ Form.value | json }}
</p>
<p>
Form Status: {{ Form.status }}
</p>
<button type="submit" class="btn btn-default" [disabled]="!labForm.valid">Build Lab Request</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Template</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title text-left">Lab Access Template</h4>
</div>
<div class="modal-body">
<p>Want user entered form data to appear on popup.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Copy Template</button>
</div>
</div>
</div>
</div>
</form>
<!--this is the .ts-->
import { Component } from '@angular/core';
import { FormBuilder, FormControl, Validator, FormGroup, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'app-',
templateUrl: './.component.html',
styleUrls: ['./.component.scss']
})
/** component*/
export class Component {
Form = new FormGroup({
Select1: new FormControl(''),
Number: new FormControl('', Validators.required),
Purpose: new FormControl(''),
name: new FormControl('', Validators.required),
});
onSubmit() {
console.warn(this.labForm.value);
}
/** LabAccess ctor */
constructor(private fb: FormBuilder) { }
}
推荐答案
您要尝试做的事情非常简单,并且您已经准备了很多东西(例如响应式表单)来实现它.
What you're attempting to do is pretty straightforward, and you've got a lot of things already in place (like reactive forms) to make it happen.
您拥有的模态很好,但是您可能应该对弹出窗口使用单独的组件,并将信息传递给它,如下所示:
Your modal you've got is fine, but you probably ought to use a separate component for the popup, and to pass information to it, it would look like this:
在您的调用模板中,包括一些模板,该模板将具有用于弹出窗口或模式窗口或包含组件的内容的模板,如下所示:
Within your calling template, include some template that will have a template for the popup or modal or whatever, which contains the component, see below:
<ng-template #formPopup>
<form-popup
[select1]="Form.get( 'Select1' ).value"
[number]="Form.get( 'Number' ).value"
[purpose]="Form.get( 'Purpose' ).value"
[name]="Form.get( 'name' ).value">
</form-popup>
</ng-template>
这将在创建组件时将这些值作为输入传递给它们:
This will pass these values in as inputs as they are into your component when it's created:
export class FormPopupComponent {
@Input() select1 : any;
@Input() number : number;
@Input() purpose : string;
@Input() name : string;
// Do things with these inputs as needed in this component
}
正如您所指出的那样,单击时还必须打开对话框或弹出窗口或其他内容,对此进行了描述在此处详细.但是,这里有一个简短的摘要-在您的原始表单模板的组件中,您需要引用我们已经创建的弹出窗口:
On click, as you pointed out, you'll also have to open your dialog or popup or whatever, which is described in detail here. But here's a quick summary - in your component for your original form-containing template, you'll need a reference to your popup, which we've already created:
@ViewChild( 'formPopup' ) formPopupRef : TemplateRef<any>;
constructor(public dialog: MatDialog) {}
openDialog(): void {
const dialogRef = this.dialog.open( this.formPopupRef );
}
这篇关于如何使用数据用户输入表单来创建弹出窗口?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!