I'm working with ionic 2 angular 2. I want to know that how to create a multi-nested formgroup in html template.
For example:
this is form group in .ts file
HomeAddress: this.formBuilder.group({
Address: ['', Validators.required]
HomeAddressDetail: this.formBuilder.group({
Country: ['', Validators.required]
Tel: this.formBuilder.group({
PhoneNo: ['', Validators.required],
HomeNo: ['', Validators.required]
}),
Email: this.formBuilder.group({
PrimaryEmail: ['', Validators.required],
SecondaryEmail: ['', Validators.required]
})
})
});
How can I set the HTML template according to this FormGroup.
You can set the HTML template like bellow:
<form [formGroup]="HomeAddress">
<div>Address: <input type="text" formControlName="Address"></div>
<div formGroupName="HomeAddressDetail">
<div>Country: <input type="text" formControlName="Country"></div>
<div formGroupName="Tel">
Phone No: <input type="text" formControlName="PhoneNo">
Home No: <input type="text" formControlName="HomeNo">
</div>
<div formGroupName="Email">
Primary Email: <input type="text" formControlName="PrimaryEmail">
Secondary Email: <input type="text" formControlName="SecondaryEmail">
</div>
</div>
</form>
I dont know the ionic controls, I replied in angular 2. You can use same format in ionic 2. Here is the plunkr https://plnkr.co/edit/SMCAMddPNmEyHuVS0IK8?p=preview
Related
I've just started using CodeIgniter 4 and it's very different from CI 3. When doing the form submission, either by using PHP post or ajax post request, both are returning page 404.
$('#formData').on('submit', function(e){
e.preventDefault();
var FormData = $(this).serialize();
$.ajax({
type: 'post',
dataType:'json',
url: '<?= base_url("/send-email") ?>',
data: FormData,
success: function(res){
console.log(res)
}
})
})
<form id="formData" method="post">
<div class="form-group row">
<div class="col-md-6 mb-4 mb-lg-0">
<input
type="text"
class="form-control"
placeholder="First name"
name="firstname"
/>
</div>
<div class="col-md-6">
<input
type="text"
class="form-control"
placeholder="Last name"
name="lastname"
/>
</div>
</div>
<div class="form-group row">
<div class="col-md-6 mr-auto">
<input type="submit" id="send_email" class="btn btn-block btn-primary text-white py-3 px-5" value="Send Message">
</div>
</div>
</form>
PHP Code
<?php namespace App\Controllers;
use CodeIgniter\Controller;
class DefaultController extends BaseController
{
public function send_email(){
if($this->request->isAJAX){
print_r($_POST);
}
}
}
I have form helper loaded from BaseController. I wonder if there is any other setting that need to be configured to make it work. I totally don't have any idea why.
Okay I have figured out the cause of the error. In order to send any request, I have to specify it in the routes of the specific method that I want to use first. In my case, I am trying to send a post request. So my routing should be like this :
$routes->post('/send-email', 'DefaultController::send_email');
Base on the doc https://codeigniter.com/user_guide/incoming/routing.html#using-http-verbs-in-routes
We are building an application that is essentially one giant form. There are several, child, parent and sibling components with their own form groups. Before the user is able to submit the application, all form groups in each component must be valid.
How can I check to see if each form group in each component is valid before the user can submit their application. If any form group contains an invalid field, the user must not be able to submit their application.
I will show an example of how we have set up form groups for sibling components and a "submit page" component that should check each component with form groups.
Component one TS file:
export enum DemographicsSection {
SECTION_ONE,
SECTION_TWO,
}
demographicsSectionEnum = DemographicsSection;
selectedSectionGroup = {
sectionOne: false,
sectionTwo: true,
};
// From Group.
public demographicsSectionOne: FormGroup;
public demographicsSectionTwo: FormGroup;
ngOnInit() {
this.initForm();
}
initForm() {
// Section 1
this.demographicsSectionOne = this.formBuilder.group({
parentsCurrentMaritalStatus: ['', [Validators.required]],
parentsNotSingleDate: ['', [Validators.required,
CustomValidators.pastMonthYearFormat]]
});
// Section 2
this.demographicsSectionTwo = this.formBuilder.group({
parentOneSsn: ['', [Validators.required, CustomValidators.numeric]],
parentOneLastName: ['', [Validators.required,
CustomValidators.onlyAlphabet]],
});
}
get sectionOne() { return this.demographicsSectionOne.controls; }
get sectionTwo() { return this.demographicsSectionTwo.controls; }
Here is a snippet of the HTML for that component:
<div>
<!-- parent-demographics-setiion-1 -->
<div [hidden]="selectedSectionGroup.sectionOne" id="
{{demographicsSectionEnum.SECTION_ONE}}">
<form [formGroup]="demographicsSectionOne">
<label for="parent-demographics-section-1" class="col-lg-3 sr-
only">Parent Status</label>
<select required formControlName="parentsCurrentMaritalStatus"
id="parentsCurrentMaritalStatus"
class="form-control" data-hint="yes"
(change)="parentMaritalStatusChange(demographicsSectionFive
,$event.target.value)">
<option selected="selected" value="">-- SELECT --</option>
<option value="1">Married / Remarried</option>
<option value="2">Never married</option>
</select>
</div>
</form>
</div>
<div [hidden]="selectedSectionGroup.sectionTwo" id="
{{demographicsSectionEnum.SECTION_TWO}}">
<form [formGroup]="demographicsSectionTwo">
<div [hidden]="sectionOne.parentsCurrentMaritalStatus.value === ''">
<div class="form-group">
<div class="col-lg-4">
<label for="parent-demographics-section-2-1" class="col-lg-3 sr-
only">Parent 1 ITIN</label>
<input formControlName="parentOneSsn" minlength=11 maxlength=11
id="parentOneSsn" type="text" class="form-control">
<div *ngIf="sectionTwo.parentOneSsn.touched &&
sectionTwo.parentOneSsn.invalid"
class="alert text-danger m-0 p-0 col-md-12">
Enter parent1 SSN or ITIN
</div>
</div>
</div>
</div>
</form>
</div>
Each component is set up the same way. We havent begun to work on the submit application, it essentially blank at this time while we try to figure out a plan.
What we expect to happen is, if there is an invalid field on any of the other components form groups, the user should not be able to submit the application. If all fields are valid on all form groups on all components, then, the user should be able to submit the application.
Use custom validators
this is Instruction :
Angular Custom validators
Tasks structure like: <Map<String,String>>[{'_tasknumber':'123'}]
Repository
#Component(
template: '''
<div *ngFor="let task of tasks">
<label for="fileInput">
<material-button>
Add image
</material-button>
</label>
id: {{task['_tasknumber']}}
<input type="file"
id="fileInput"
multiple
#fileInput
(change)="uploadFilesForTask(fileInput.files, task['_tasknumber'])"/>
</div>
''')
In function uploadFilesForTask I just print taskId value:
Future<Null> uploadFilesForTask(
List<File> files, String taskId) async {
print(taskId);
}
When I press "Add image" button I every time get id of first task in list of tasks.
When I press input button "Choose files" I get right id what I need.
How I can get right id of task by "Add image" button?
pubspec.yaml:
environment:
sdk: '>=1.24.2'
dependencies:
angular: '^4.0.0'
angular_forms: '^1.0.0'
angular_router: '^1.0.2'
angular_components: '^0.8.0'
I use not unique label for attribute.
Not right:
<label for="fileInput">
<material-button>
Add image
</material-button>
</label>
<input type="file"
id="fileInput"
multiple
#fileInput
(change)="uploadFilesForTask(fileInput.files, task['_tasknumber'])"/>
Right:
<label [attr.for]="task['_tasknumber']">
<material-button>
Add image
</material-button>
</label>
<input type="file"
[attr.id]="task['_tasknumber']"
multiple
#fileInput
(change)="uploadFilesForTask(fileInput.files, task['_tasknumber'])"/>
How to submit form with dynamical added texbox in div MVC.
Hi,
I want to submit a form which a textbox (full name),age ,(Phone no,phonenotype)
User can add n no. of phone no,phonetype eg.
Name -michale
age- 27
Phone:989878767 phonetype - mobile
Phone 022787656 phonetype- office
I want to submit this form to save the data in the database.
But in formcollection phone,phonetype is coming as separate array .
Hence unable to find which phone no. is mobile or office.
A dirty way:
use a name concatenated with a number:
<body> <div id="listPhones">
<div>
<input type="text" name="phone00"/><input type="text" name="phonetype00"/>
</div>
</div>
<bouton onclick="addPhone()">More</bouton>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.3.min.js"> </script>
<script type="text/javascript">
function addPhone() {
var nbr_phone = $("#listPhones").children().length;
$("#listPhones").append("<div><input type='text' name='phone" + nbr_phone + "'/><input type='text' name='phonetype"+ nbr_phone + "'/></div>"); } </script>
</body>
How are you constructing the payload you're submitting?
You can POST JSON - e.g.
{"name":"foo", "age":"123", "phone":[{"type":"mobile", "no":"12345"}, {"type":"home", "no":"345678"}]}
If you're building <input />s, then something like this:
<ul>
<li>Name: <input type="text" name="name" /></li>
<li>Age: <input type="text" name="age" /></li>
<li>Phone type:
<input type="radio" name="phone[0][type]" value="mobile" /> Mobile
<input type="radio" name="phone[0][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[0][no]" /></li>
<li>Phone type:
<input type="radio" name="phone[1][type]" value="mobile" /> Mobile
<input type="radio" name="phone[1][type]" value="home" /> Home
</li>
<li>Phone: <input type="text" name="phone[1][no]" /></li>
</ul>
<input type="submit" value="go" />
Hth.
I am trying to use the jQuery datepicker for a form on a site that uses jQuery 1.3.2 but it's not working. I have to reference a newer jQuery library for some of my form functionality, and also the jQuery ui for datepicker to work. I have used noConflict for the newer jquery library but it's still not working. I get Uncaught TypeError: Cannot read property 'document' of null in the console. Updating/removing the 1.3.2 reference is not an option.
Here is my fiddle, which works. but i get the error above in Chrome (not FF) and the datepicker will not work on my site. http://jsfiddle.net/pnA33/
Can anyone help? It works locally but not on the server (which is a dev enviornment so I can't share a link). I found this but as I am relatively new to jQuery it is over my head.
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
var jQuery_1_9_1 = jQuery.noConflict(true);
jQuery_1_9_1(document).ready(function() {
jQuery_1_9_1( "#datepicker" ).datepicker({ minDate: -1, maxDate: "+24D" });
jQuery_1_9_1('#pancettaForm').change(function () {
jQuery_1_9_1('.address,#new-ship-date').hide();
if (jQuery_1_9_1('#ship-address').prop('checked')) {
jQuery_1_9_1('.address').show();
}
else if (jQuery_1_9_1('#ship-date').prop('checked')) {
jQuery_1_9_1('#new-ship-date').show();
}
else if (jQuery_1_9_1('#ship-both').prop('checked')) {
jQuery_1_9_1('.address, #new-ship-date').show();
}
});
});
function validateForm()
{
var x=document.forms["pancettaForm"]["order-number"].value;
if (x==null || x=="")
{
alert("Please provide your order number from the confirmation email sent immediately after placing your order.");
return false;
}
}
</script>
HTML:
<form name="pancettaForm" method="post" action="http://lizlantz.com/lcform.php" id="pancettaForm" onsubmit="return validateForm()">
<input type="hidden" value="Pancetta Order Update" name="subject">
<input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect">
<ol>
<li>
<label for="update-ship">I'd like to:</label>
<input id="ship-address" name="update-ship" type="radio" value="update-ship-address"/> Have pancetta shipped to a different address than my skillet<br />
<input id="ship-date" name="update-ship" type="radio" value="update-ship-date" /> Have pancetta shipped sooner than June 14, 2013 <br />
<input id="ship-both" name="update-ship" type="radio" value="update-both" /> Make changes to both the shipping address and shipping date
</li>
<li>
<label for="order-number"><em>*</em>Order Number (available in order confirmation email):</label>
<input type="text" name="order-number">
</li>
<li>
<label for="full-name"><em>*</em>Recipient Full Name:</label>
<input type="text" name="full-name">
</li>
<li class="address" style="display: none;">
<label for="address">
<em>*</em>Address
</label>
<input type="text" name="address">
<label for="address2">
Address Line 2
</label>
<input type="text" name="address2">
</li>
<li class="address" style="display: none;">
<label for="city">
<em>*</em>City
</label>
<input type="text" name="city">
<label for="state">
<em>*</em>State
</label>
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<label for="zip">
<em>*</em>Zip Code
</label>
<input type="text" name="zip">
</li>
<li id="new-ship-date" style="display: none;">
<em>*</em><label for="updated-ship-date">New Ship Date:</label>
<input type="text" id="datepicker" name="updated-ship-date" value="Update Your Ship Date" />
</li>
<li>
<label for="phone">
<em>*</em>Phone (for delivery questions)
</label>
<input type="text" name="phone">
</li>
</ol>
<input type="submit" id="button" name="submit" value="Update Pancetta">
</form>
Ah ha! You actually cannot run two versions of jQuery on the same document instance at one time...hence the issue here. This solution comes directly from Splendìd Angst's answer in this thread Can I use multiple versions of jQuery on the same page?
Basically you must declare your noConflict version prior to entering the document "main loop" I suppose you can call it.
Declare your noConflict variable outside the document.ready call...use the standard $(document).ready() syntax, then use (and ONLY use) your noconflict variable within the ready closure. That should do it.
I haven't tested this mind you but it makes sense and it won't take you much tweaking of your code to try it out.
TIL something new about jQuery :)