Form with material design
This commit is contained in:
annampak
parent
4ccafb6b31
commit
391fd20baf
|
|
@ -1,5 +1,7 @@
|
|||
<div [formGroup]="form">
|
||||
<mat-radio-button name="{{field.id}}" value="true" label="Yes" formControlName="value"></mat-radio-button>
|
||||
<br>
|
||||
<mat-radio-button name="{{field.id}}" value="false" label="No" formControlName="value"></mat-radio-button>
|
||||
<mat-radio-group formControlName="value">
|
||||
<mat-radio-button name="{{field.id}}" value="true">Yes</mat-radio-button>
|
||||
<br>
|
||||
<mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<div [formGroup]="form" class="form-group">
|
||||
<mat-checkbox [formControl]="form.get('value')" binary="true">{{field.data.label}}</mat-checkbox>
|
||||
<mat-checkbox formControlName="value">{{field.data.label}}</mat-checkbox>
|
||||
<!-- <input type="checkbox" formControlName="value"> -->
|
||||
</div>
|
||||
|
||||
<!-- label="{{field.data.label}}" -->
|
||||
<!-- label="{{field.data.label}}" formControlName="form.get('value').value"-->
|
||||
|
|
@ -15,4 +15,5 @@ export class DynamicFieldCheckBoxComponent {
|
|||
@Input() field: Field;
|
||||
@Input() form: FormGroup;
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,8 @@
|
|||
<div [formGroup]="form">
|
||||
<select class="form-control" formControlName="value">
|
||||
<option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
|
||||
</select>
|
||||
<mat-form-field>
|
||||
<mat-select formControlName="value">
|
||||
<mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<div [formGroup]="form">
|
||||
<div *ngFor="let option of this.field.data.options let index = index">
|
||||
<mat-radio-button name="{{field.id}}" [value]="option.value" formControlName="value">{{option.label}}</mat-radio-button>
|
||||
</div>
|
||||
<mat-radio-group formControlName="value">
|
||||
<div *ngFor="let option of this.field.data.options let index = index">
|
||||
<mat-radio-button [value]="option.value" >{{option.label}}</mat-radio-button>
|
||||
</div>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<!-- label="{{option.label}}" -->
|
||||
|
|
@ -1,17 +1,18 @@
|
|||
<mat-form-field [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form"
|
||||
[ngSwitch]="field.viewStyle.renderStyle">
|
||||
<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
|
||||
|
||||
<h5 *ngIf="field.title">{{field.title}}</h5>
|
||||
|
||||
|
||||
<div [class.content-left-margin]="field.title">
|
||||
<h5 *ngIf="field.description">{{field.description}}</h5>
|
||||
<h5 *ngIf="field.extendedDescription" class="field-extended-desc">
|
||||
<i>{{field.extendedDescription}}</i>
|
||||
</h5>
|
||||
|
||||
<h5 *ngIf="field.description">{{field.description}}</h5>
|
||||
<h5 *ngIf="field.extendedDescription" class="field-extended-desc">
|
||||
<i>{{field.extendedDescription}}</i>
|
||||
</h5>
|
||||
|
||||
<div *ngSwitchCase="'freetext'">
|
||||
<input matInput formControlName="value">
|
||||
<mat-form-field>
|
||||
<input matInput formControlName="value">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'combobox'">
|
||||
|
|
@ -22,6 +23,7 @@
|
|||
<div *ngIf="this.field.data.type === 'wordlist'">
|
||||
<df-dropdown [form]="form" [field]="field"></df-dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'checkBox'" class="checkbox">
|
||||
|
|
@ -29,7 +31,13 @@
|
|||
</div>
|
||||
|
||||
<div *ngSwitchCase="'textarea'">
|
||||
<textarea class="form-control" formControlName="value"> </textarea>
|
||||
<mat-form-field>
|
||||
<textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10"> </textarea>
|
||||
<button mat-button *ngIf="form.get('value').value" matSuffix mat-icon-button aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngSwitchCase="'booleanDecision'">
|
||||
|
|
@ -50,7 +58,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- <div [formGroup]="form" class="form-group">
|
||||
|
||||
|
|
|
|||
|
|
@ -27,10 +27,15 @@ export class DynamicFormFieldComponent {
|
|||
|
||||
constructor(private route: ActivatedRoute,private visibilityRulesService:VisibilityRulesService) { }
|
||||
|
||||
|
||||
ngOnChanges(changeRecord) {
|
||||
|
||||
}
|
||||
|
||||
clearInput(){
|
||||
debugger;
|
||||
}
|
||||
|
||||
get isValid() {
|
||||
return this.form.get("value").valid;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export class DynamicFormCompositeFieldComponent implements OnInit {
|
|||
constructor(private visibilityRulesService: VisibilityRulesService) { }
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
console.log(this.form);
|
||||
}
|
||||
|
||||
addMultipleField(fieldIndex: number) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
|
||||
<!-- Το αφηνω σχόλιο για τεστινγ για να βλεπω αν μου ξεφευγει κάτι -->
|
||||
<!-- <div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading clearfix">
|
||||
<a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>
|
||||
|
|
@ -28,13 +29,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
|
||||
style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a> -->
|
||||
<div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel expanded=true>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>
|
||||
|
|
|
|||
Loading…
Reference in New Issue