File
Implements
Metadata
selector |
ab-drupal-entity-node-editor |
template |
<div *ngIf="data" class="node node--view-mode-edit clearfix">
<form *ngIf="form" [formGroup]="form" (ngSubmit)="submitForm(form.value)" class="panel card padding margin-xs">
<fieldset *ngIf="form.controls['title']" class="form-group"
[ngClass]="{'has-error':!form.controls['title'].valid && form.controls['title'].touched}">
<label>{{ 'title' | uppercase | translate }}</label>
<input name="title" [(ngModel)]="data.attributes.title" [formControl]="form.controls['title']" class="form-control" type="text" placeholder="">
<div *ngIf="form.controls['title'].hasError('required') && form.controls['title'].touched"
class="form-error">{{ 'FIELD REQUIRED' | translate }}.
</div>
</fieldset>
<fieldset *ngIf="form.controls['body']" class="form-group"
[ngClass]="{'has-error':!form.controls['body'].valid && form.controls['body'].touched}">
<label>{{ 'body' | translate }}</label>
<textarea name="body" [(ngModel)]="data.attributes.body.value" class="form-control" type="text" placeholder=""
[formControl]="form.controls['body']"></textarea>
<div *ngIf="form.controls['body'].hasError('required') && form.controls['body'].touched"
class="form-error">{{ 'FIELD REQUIRED' | translate }}.
</div>
</fieldset>
<fieldset *ngIf="form.controls['field_iframe']" class="form-group"
[ngClass]="{'has-error':!form.controls['field_iframe'].valid && form.controls['field_iframe'].touched}">
<label>{{ 'field_iframe' | translate }}</label>
<input name="field_iframe" [(ngModel)]="data.attributes.field_iframe.uri" class="form-control" type="text" placeholder=""
[formControl]="form.controls['field_iframe']">
<div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_iframe'].hasError('pattern') && form.controls['field_iframe'].touched"
class="form-error">{{ 'URL INVALID' | translate }}.
</div>
</fieldset>
<fieldset *ngIf="form.controls['field_json']" class="form-group"
[ngClass]="{'has-error':!form.controls['field_json'].valid && form.controls['field_json'].touched}">
<label>{{ 'field_json' | translate }}</label>
<textarea name="field_json" [(ngModel)]="data.attributes.field_json.value" class="form-control" type="text" placeholder=""
[formControl]="form.controls['field_json']"></textarea>
<div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_json'].hasError('pattern') && form.controls['field_json'].touched"
class="form-error">{{ 'JSON INVALID' | translate }}.
</div>
</fieldset>
<div class="form-group">
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">
{{ 'SUBMIT' | translate }}
</button>
<button class="btn btn-primary" (click)="cancelForm()">
{{ 'CANCEL' | translate }}
</button>
<div *ngIf="!form.valid && submitted"
class="form-error">{{ submitError | translate }}.
</div>
</div>
</form>
</div>
|
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
state
|
Type: string
Default value: 'read'
|
|
submitError
|
Default value: 'FORM INVALID'
|
|
Methods
ngOnChanges
|
ngOnChanges()
|
|
|
submitForm
|
submitForm(form: )
|
|
|
Public
data
|
data: any
|
Type : any
|
|
Public
submitted
|
submitted:
|
Default value : false
|
|
import {Component, EventEmitter, OnInit, OnChanges, Input, Output} from '@angular/core';
// import {BrowserModule, DomSanitizer, SafeHtml, SafeResourceUrl} from '@angular/platform-browser';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {validationConstants} from '../../../../shared/validation/validationConstants';
import {ConfigService} from '../../../../angular/services/index';
@Component({
selector: 'ab-drupal-entity-node-editor',
template: `
<div *ngIf="data" class="node node--view-mode-edit clearfix">
<form *ngIf="form" [formGroup]="form" (ngSubmit)="submitForm(form.value)" class="panel card padding margin-xs">
<fieldset *ngIf="form.controls['title']" class="form-group"
[ngClass]="{'has-error':!form.controls['title'].valid && form.controls['title'].touched}">
<label>{{ 'title' | uppercase | translate }}</label>
<input name="title" [(ngModel)]="data.attributes.title" [formControl]="form.controls['title']" class="form-control" type="text" placeholder="">
<div *ngIf="form.controls['title'].hasError('required') && form.controls['title'].touched"
class="form-error">{{ 'FIELD REQUIRED' | translate }}.
</div>
</fieldset>
<fieldset *ngIf="form.controls['body']" class="form-group"
[ngClass]="{'has-error':!form.controls['body'].valid && form.controls['body'].touched}">
<label>{{ 'body' | translate }}</label>
<textarea name="body" [(ngModel)]="data.attributes.body.value" class="form-control" type="text" placeholder=""
[formControl]="form.controls['body']"></textarea>
<div *ngIf="form.controls['body'].hasError('required') && form.controls['body'].touched"
class="form-error">{{ 'FIELD REQUIRED' | translate }}.
</div>
</fieldset>
<fieldset *ngIf="form.controls['field_iframe']" class="form-group"
[ngClass]="{'has-error':!form.controls['field_iframe'].valid && form.controls['field_iframe'].touched}">
<label>{{ 'field_iframe' | translate }}</label>
<input name="field_iframe" [(ngModel)]="data.attributes.field_iframe.uri" class="form-control" type="text" placeholder=""
[formControl]="form.controls['field_iframe']">
<div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_iframe'].hasError('pattern') && form.controls['field_iframe'].touched"
class="form-error">{{ 'URL INVALID' | translate }}.
</div>
</fieldset>
<fieldset *ngIf="form.controls['field_json']" class="form-group"
[ngClass]="{'has-error':!form.controls['field_json'].valid && form.controls['field_json'].touched}">
<label>{{ 'field_json' | translate }}</label>
<textarea name="field_json" [(ngModel)]="data.attributes.field_json.value" class="form-control" type="text" placeholder=""
[formControl]="form.controls['field_json']"></textarea>
<div *ngIf="form.controls['field_iframe'].hasError('required') || form.controls['field_json'].hasError('pattern') && form.controls['field_json'].touched"
class="form-error">{{ 'JSON INVALID' | translate }}.
</div>
</fieldset>
<div class="form-group">
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">
{{ 'SUBMIT' | translate }}
</button>
<button class="btn btn-primary" (click)="cancelForm()">
{{ 'CANCEL' | translate }}
</button>
<div *ngIf="!form.valid && submitted"
class="form-error">{{ submitError | translate }}.
</div>
</div>
</form>
</div>
`
})
export class NodeEditorComponent implements OnChanges {
@Input() node: any;
@Input() state: string = 'read';
@Input() authenticated: boolean;
@Input() submitError = 'FORM INVALID';
@Output() submit: EventEmitter<any> = new EventEmitter();
@Output() cancel: EventEmitter<any> = new EventEmitter();
public form: FormGroup;
public data: any;
public submitted = false;
// constructor(public fb: FormBuilder, public config: ConfigService, public sanitizer: DomSanitizer) { }
constructor(public fb: FormBuilder, public config: ConfigService ) { }
ngOnInit() {
let type = this.node.data.type.split('--')[1];
let form = {
title: [null, [Validators.required]]
};
this.data = this.node.data;
let fields = this.config.get('drupal')['definitions'][type];
let validators = [];
Object.keys(fields).forEach((fieldName, i) => {
if(!this.data.attributes[fieldName]) {
console.log('drupal definition error: field "'+fieldName+'" does not exist on node type "'+type+'"');
}
console.log(type+'.'+fieldName,fields[fieldName]);
if(fields[fieldName].required) {
validators.push(Validators.required)
}
});
console.log('fields',fields);
console.log('validators',validators);
if (this.data.attributes['body']) {
form['body'] = [null, [Validators.required]];
// form['body'] = [null, [Validators.pattern(validationConstants.REGEX_REQUIRED)]];
}
if (this.data.attributes['field_iframe']) {
// form['field_iframe'] = [null, [Validators.required]];
form['field_iframe'] = [null, [Validators.required, Validators.pattern(validationConstants.REGEX_URL)]];
}
if (this.data.attributes['field_json']) {
form['field_json'] = [null, []];
// form['field_json'] = [null, [Validators.pattern(validationConstants.REGEX_JSON)]];
// form['field_json'] = [null, [Validators.required,Validators.pattern(validationConstants.REGEX_JSON)]];
}
this.form = this.fb.group(form);
}
submitForm(form) {
console.log('submitForm(form)');
console.log(form);
this.submitted = true;
if(!this.form.valid){
return;
}
this.submit.emit(this.node);
}
cancelForm() {
this.cancel.emit(this.node);
}
ngOnChanges() {
if (!this.node) {
return;
}
// this.parse(this.node);
}
}
Legend
Html element with directive