<!DOCTYPE html>
<html>
<head>
<title>ngx-bootstrap plunkr</title>
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.6/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.7.2/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System
.import('main.ts')
.catch(console.error.bind(console));
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>body { font-family: Roboto, Arial, sans-serif; margin: 0 }</style>
</head>
<body>
<ngx-app>Loading ngx-bootstrap...</ngx-app>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
</body>
</html>
import { Component, Injector, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'ngx-app',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
private registrationArray: Array<any> = [
{ participantName: "fahad Haque", participantEmail: "fahad.haq@gmail.com", isAccordionOpen: true },
{ participantName: "fahad Haque", participantEmail: "fahad.haq@gmail.com", isAccordionOpen: false },
{ participantName: "fahad Haque", participantEmail: "fahad.haq@gmail.com", isAccordionOpen: false }];
myGroup: FormGroup;
constructor(injector: Injector,
private fb: FormBuilder,
) {
}
ngOnInit(): void {
this.myGroup = this.fb.group({
myDetails: this.fb.array([
//this.initUserDetail(),
])
});
for (var i = 0; i < this.registrationArray.length; i++) {
this.addUserDetails()
}
}
addUserDetails() {
const control = <FormArray>this.myGroup.controls['myDetails'];
control.push(this.initUserDetail());
}
initUserDetail() {
return this.fb.group({
address: ['', Validators.compose([
Validators.required
])],
suburb: ['', Validators.compose([
Validators.required
])],
city: ['', Validators.compose([
Validators.required
])],
name: ['', Validators.compose([
Validators.required
])],
telephonenumber: ['', Validators.compose([
Validators.required
])],
relationship: ['', Validators.compose([
Validators.required
])]
});
}
gotoAddons(form): void{
}
}
<div class="container">
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="image">
<img src="https://secure.tiktok.biz/_appResources/REV/s393-hdr.jpg" style="height:237px;width:100%;">
<div class="overlay">
<div>
<h2>eventName</h2>
</div>
</div>
</div>
<accordion [closeOthers]="true" style="margin-top:5px;">
<accordion-group *ngFor="let registration of registrationArray; let i = index" #groupval style="margin-top:5px;" [isOpen]="registration.isAccordionOpen">
<div accordion-heading style="width:100%;">
Registrant No. {{i + 1}}
<i class="pull-right float-xs-right glyphicon"
[ngClass]="{'glyphicon-chevron-down': groupval?.isOpen, 'glyphicon-chevron-up': !groupval?.isOpen}"></i>
</div>
<form [formGroup]="myGroup" (ngSubmit)="gotoAddons(myDetails)">
<div formArrayName="myDetails">
<div class="panel-body" [formGroupName]="i">
<div style="padding-top:20px;clear:both;">
<div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
Your Address
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Address Line 1</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input autofocus class="form-control" type="text" id="address" name="address" formControlName="address" required>
</div>
</div>
</div>
<div style="padding-top:15px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Suburb</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input class="form-control" type="text" id="suburb" name="suburb" formControlName="suburb" required>
</div>
</div>
</div>
<div style="padding-top:15px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>City</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input class="form-control" type="text" id="city" name="city" formControlName="city" required>
</div>
</div>
</div>
<div style="padding-top:15px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
Post Code
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input class="form-control" type="text" id="postcode" name="postcode">
</div>
</div>
</div>
</div>
<div style="padding-top:20px;clear:both;">
<div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
Emergency Contact Details
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Name</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input class="form-control" type="text" id="name" name="name" formControlName="name" required>
</div>
</div>
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Telephone Number</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input class="form-control" type="text" id="telephonenumber" name="telephonenumber" formControlName="telephonenumber" required>
</div>
</div>
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Relationship to you</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input class="form-control" type="text" id="relationship" name="relationship" formControlName="relationship" required>
</div>
</div>
</div>
</div>
<div style="width:100%;" *ngIf="i < registrationArray.length - 1">
<div style="float:right;">
<button (click)="groupval.isOpen = !groupval.isOpen" class="btn green">Open next tab</button>
</div>
</div>
</div>
</div>
</form>
</accordion-group>
</accordion>
</div>
<!-- END CONTENT -->
</div>
<!-- END CONTAINER -->
</div>
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {AlertModule} from 'ngx-bootstrap'
import { AccordionModule } from 'ngx-bootstrap';
@NgModule({
imports: [
BrowserModule,
CommonModule,
FormsModule,
ReactiveFormsModule,
AlertModule.forRoot(),
AccordionModule.forRoot()
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class PlunkerNgxModule {}
platformBrowserDynamic().bootstrapModule(PlunkerNgxModule);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
System.config({
map: {
'main': 'main.js',
// Angular specific mappings.
'@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
// Third party libraries
'tslib': 'https://unpkg.com/tslib@1.7.1',
'rxjs': 'https://unpkg.com/rxjs',
'ngx-bootstrap': 'https://unpkg.com/ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js'
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
}
});
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/