multiple rows select form(course fields)

parent 40d90c84
......@@ -62,7 +62,7 @@ export default class Form3 {
// Call map on the response observable to get the parsed people object
.map((res: Response) => res.json())
.subscribe(success => {alert("Η εγγραφή έγινε με επιτυχία"); console.log("success post")}, // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
error => console.log("Error HTTP POST Service"), // in case of failure show this message
() => console.log("write this message anyway"));//run this code in all cases);
}
}
import {Component, OnInit} from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import {Injectable} from "@angular/core";
import {
FormBuilder,
FormGroup,
FormControl,
FormArray
} from '@angular/forms';
import { CourseField } from './coursefield';
@Component({
selector: 'course-fields-select',
template: `
<form [formGroup]="formGroup">
<div formArrayName="formArray">
<div *ngIf="courseFields.length === 0" class="loading">Loading&#8230;</div>
<div *ngFor="let control of cfs.controls; let i=index">
<div class="row">
<div class="col-md-2 pull-right">
<input type="checkbox" formControlName="{{i}}">
</div>
<div class="col-md-10 pull-left">
{{courseFields[i].name}}
</div>
</div>
</div>
</div>
<!-- <button (click)="addInput()">Add Input</button> -->
</form>
<pre>{{formGroup.value | json}}</pre>
`
})
@Injectable() export default class CourseFieldsSelect implements OnInit {
public formGroup: FormGroup;
public cfs = new FormArray([]);
public courseFields: CourseField[];
constructor(private http: Http, private fb: FormBuilder) {
this.courseFields = [];
this.formGroup = this.fb.group({
formArray: this.cfs
});
};
ngOnInit() {
this.getCourseFields(this.http);//called after the constructor and called after the first ngOnChanges()
}
getCourseFields(http: Http) {
this.http.get('http://eepal.dev/drupal/coursefields/list')
// Call map on the response observable to get the parsed people object
.map(response => <CourseField[]>response.json())
.subscribe(data => {
console.log(data);
this.courseFields = data;
for (let i = 0; i < this.courseFields.length; i++) {
this.cfs.push(new FormControl('', []));
// this.courseFields[i] = new CourseField(0,'');
}
}, // put the data returned from the server in our variable
error => console.log("Error HTTP GET Service"), // in case of failure show this message
() => console.log("this.courseFields"));//run this code in all cases); */
}
/* onSubmit(studentform: any) {
let headers = new Headers({
"Authorization": "Basic cmVzdHVzZXI6czNjckV0MFAwdWwwJA==", // encoded user:pass
"Access-Control-Allow-Credentials": "true",
"Content-Type": "application/json",
// "Content-Type": "text/plain", // try to skip preflight
"X-CSRF-Token": "hVtACDJjFRSyE4bgGJENHbXY0B9yNhF71Fw-cYHSDNY"
});
let options = new RequestOptions({ headers: headers, withCredentials: true });
this.http.post('http://eepal.dev/drupal/entity/student', this.student, options)
// Call map on the response observable to get the parsed people object
.map((res: Response) => res.json())
.subscribe(success => {alert("Η εγγραφή έγινε με επιτυχία"); console.log("success post")}, // put the data returned from the server in our variable
error => console.log("Error HTTP POST Service"), // in case of failure show this message
() => console.log("write this message anyway"));//run this code in all cases);
} */
/* addInput() {
alert('hello');
console.log(this.formGroup);
this.cfs.push(new FormControl('', []));
// this.formGroup.formArray.push(this.fb.control(''));
}; */
}
export class CourseField {
constructor(
public id: number,
public name: string
) {}
}
/* Absolute Center Spinner */
.loading {
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 1500ms infinite linear;
-moz-animation: spinner 1500ms infinite linear;
-ms-animation: spinner 1500ms infinite linear;
-o-animation: spinner 1500ms infinite linear;
animation: spinner 1500ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
......@@ -47,6 +47,7 @@ import {
StressTester,
StressRecItem,
} from '../components/stress-tester/stress-tester';
import CourseFieldsSelect from '../components/student-application-form/course-fields-select';
export const KitchenSinkRoutes: Routes = [
{ path: '', component: Home },
......@@ -65,6 +66,7 @@ export const KitchenSinkRoutes: Routes = [
{ path: 'metadata-test', component: MetadataTest },
{ path: 'lazy-load',
loadChildren: '../components/lazy-load/lazy-load#LazyLoadedModule' },
{ path: 'course-fields-select', component: CourseFieldsSelect }
];
export const KitchenSinkDeclarations = [
......@@ -107,4 +109,5 @@ export const KitchenSinkDeclarations = [
Component4,
Component5,
Component6,
CourseFieldsSelect,
];
......@@ -5,6 +5,7 @@ import {
ActivatedRoute,
}
from '@angular/router';
import './globalstyles.css';
@Component({
selector: 'kitchen-sink',
......@@ -30,6 +31,9 @@ import {
<li [ngClass]="{active: path=='form2'}">
<a [routerLink]="['/form2']">NgModel Form</a>
</li> -->
<li [ngClass]="{active: path=='course-fields-select'}">
<a [routerLink]="['/course-fields-select']">Επιλογή Ειδικότητας</a>
</li>
<li [ngClass]="{active: path=='form3'}">
<a [routerLink]="['/form3']">Αίτηση</a>
</li>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment