### File

`projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts`

### Implements

`OnChanges`

### 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

- Public config
- Public data
- Public fb
- Public form
- Public submitted

###### Methods

- cancelForm
- ngOnChanges
- ngOnInit
- submitForm

###### Inputs

- authenticated
- node
- state
- submitError

###### Outputs

- cancel
- submit

### Constructor

`constructor(fb: FormBuilder, config: ConfigService)`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:82

Parameters :

Name | Type | Optional
fb | `FormBuilder` | no
config | `ConfigService` | no

### Inputs

`authenticated` | Type: `boolean`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:75

`node` | Type: `any`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:73

`state` | Type: `string` Default value: `'read'`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:74

`submitError` | Default value: `'FORM INVALID'`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:76

### Outputs

`cancel` | `$event` type: `EventEmitter<any>`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:78

`submit` | `$event` type: `EventEmitter<any>`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:77

### Methods

cancelForm
`cancelForm()`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:132
Returns : `void`

ngOnChanges
`ngOnChanges()`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:138
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:87
Returns : `void`

submitForm
`submitForm(form: )`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:123

Parameters :

Name | Optional
form | no

Returns : `void`

### Properties

Public config
`config: `ConfigService``
Type : `ConfigService`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:85

Public data
`data: `any``
Type : `any`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:81

Public fb
`fb: `FormBuilder``
Type : `FormBuilder`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:85

Public form
`form: `FormGroup``
Type : `FormGroup`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:80

Public submitted
`submitted: ```
Default value : `false`
Defined in projects/app-base-library/src/lib/angular/modules/drupal/components/node-editor.component.ts:82

    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
Component
Html element with directive

# results matching ""

# No results matching ""