Rule forms.

src/Squidex/app/features/rules/pages/rules/actions/algolia-action.component.html

@@ -1,6 +1,6 @@
 <h3 class="wizard-title">Populate index in algolia with content</h3>
 
-<form [formGroup]="actionForm" class="form-horizontal" (ngSubmit)="save()">
+<div [formGroup]="actionForm" class="form-horizontal">
     <div class="form-group row">
         <label class="col col-3 col-form-label" for="appId">App ID</label>
 
@@ -42,4 +42,4 @@
             </small>
         </div>
     </div>
-</form>
+</div>

src/Squidex/app/features/rules/pages/rules/actions/algolia-action.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'sqx-algolia-action',
@@ -17,49 +17,26 @@ export class AlgoliaActionComponent implements OnInit {
     @Input()
     public action: any;
 
-    @Output()
-    public actionChanged = new EventEmitter<object>();
+    @Input()
+    public actionForm: FormGroup;
 
+    @Input()
     public actionFormSubmitted = false;
-    public actionForm =
-        this.formBuilder.group({
-            appId: ['',
-                [
-                    Validators.required
-                ]
-            ],
-            apiKey: ['',
-                [
-                    Validators.required
-                ]
-            ],
-            indexName: ['$SCHEMA_NAME',
-                [
-                    Validators.required
-                ]
-            ]
-        });
-
-    constructor(
-        private readonly formBuilder: FormBuilder
-    ) {
-    }
 
     public ngOnInit() {
-        this.action = Object.assign({}, { appId: '', apiKey: '', indexName: '$SCHEMA_NAME' }, this.action || {});
-
-        this.actionFormSubmitted = false;
-        this.actionForm.reset();
-        this.actionForm.setValue(this.action);
-    }
-
-    public save() {
-        this.actionFormSubmitted = true;
-
-        if (this.actionForm.valid) {
-            const action = this.actionForm.value;
-
-            this.actionChanged.emit(action);
-        }
+        this.actionForm.setControl('appId',
+            new FormControl(this.action.appId || '', [
+                Validators.required
+            ]));
+
+        this.actionForm.setControl('apiKey',
+            new FormControl(this.action.apiKey || '', [
+                Validators.required
+            ]));
+
+        this.actionForm.setControl('indexName',
+            new FormControl(this.action.indexName || '$SCHEMA_NAME', [
+                Validators.required
+            ]));
     }
 }

src/Squidex/app/features/rules/pages/rules/actions/azure-queue-action.component.html

@@ -1,6 +1,6 @@
 <h3 class="wizard-title">Send event payload to Azure Storage Queue</h3>
 
-<form [formGroup]="actionForm" class="form-horizontal" (ngSubmit)="save()">
+<form [formGroup]="actionForm" class="form-horizontal">
     <div class="form-group row">
         <label class="col col-3 col-form-label" for="connectionString">Connection String</label>
 

src/Squidex/app/features/rules/pages/rules/actions/azure-queue-action.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 import { ValidatorsEx } from '@app/shared';
 
@@ -19,45 +19,22 @@ export class AzureQueueActionComponent implements OnInit {
     @Input()
     public action: any;
 
-    @Output()
-    public actionChanged = new EventEmitter<object>();
+    @Input()
+    public actionForm: FormGroup;
 
+    @Input()
     public actionFormSubmitted = false;
-    public actionForm =
-        this.formBuilder.group({
-            connectionString: ['',
-                [
-                    Validators.required
-                ]
-            ],
-            queue: ['squidex',
-                [
-                    Validators.required,
-                    ValidatorsEx.pattern('[a-z][a-z0-9]{2,}(\-[a-z0-9]+)*', 'Name must be a valid azure queue name.')
-                ]
-            ]
-        });
-
-    constructor(
-        private readonly formBuilder: FormBuilder
-    ) {
-    }
 
     public ngOnInit() {
-        this.action = Object.assign({}, { connectionString: '', queue: 'squidex' }, this.action || {});
-
-        this.actionFormSubmitted = false;
-        this.actionForm.reset();
-        this.actionForm.setValue(this.action);
-    }
-
-    public save() {
-        this.actionFormSubmitted = true;
-
-        if (this.actionForm.valid) {
-            const action = this.actionForm.value;
-
-            this.actionChanged.emit(action);
-        }
+        this.actionForm.setControl('connectionString',
+            new FormControl(this.action.connectionString || '', [
+                Validators.required
+            ]));
+
+        this.actionForm.setControl('queue',
+            new FormControl(this.action.queue || 'squidex', [
+                Validators.required,
+                ValidatorsEx.pattern('[a-z][a-z0-9]{2,}(\-[a-z0-9]+)*', 'Name must be a valid azure queue name.')
+            ]));
     }
 }

src/Squidex/app/features/rules/pages/rules/actions/elastic-search-action.component.html

@@ -1,6 +1,6 @@
 <h3 class="wizard-title">Populate index in ElasticSearch with content</h3>
 
-<form [formGroup]="actionForm" class="form-horizontal" (ngSubmit)="save()">
+<div [formGroup]="actionForm" class="form-horizontal">
     <div class="form-group row">
         <label class="col col-3 col-form-label" for="host">Host</label>
 
@@ -70,4 +70,4 @@
             </small>
         </div>
     </div>
-</form>
+</div>

src/Squidex/app/features/rules/pages/rules/actions/elastic-search-action.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'sqx-elastic-search-action',
@@ -17,57 +17,30 @@ export class ElasticSearchActionComponent implements OnInit {
     @Input()
     public action: any;
 
-    @Output()
-    public actionChanged = new EventEmitter<object>();
+    @Input()
+    public actionForm: FormGroup;
 
+    @Input()
     public actionFormSubmitted = false;
-    public actionForm =
-        this.formBuilder.group({
-            host: ['',
-                [
-                    Validators.required
-                ]
-            ],
-            indexName: ['$APP_NAME',
-                [
-                    Validators.required
-                ]
-            ],
-            indexType: ['$SCHEMA_NAME',
-                [
-                    // Validators.required
-                ]
-            ],
-            username: '',
-            password: ''
-        });
-
-    constructor(
-        private readonly formBuilder: FormBuilder
-    ) {
-    }
 
     public ngOnInit() {
-        this.action = Object.assign({}, {
-            host: '',
-            indexName: '$APP_NAME',
-            indexType: '$SCHEMA_NAME',
-            username: '',
-            password: ''
-        }, this.action || {});
+        this.actionForm.setControl('host',
+            new FormControl(this.action.host || '', [
+                Validators.required
+            ]));
 
-        this.actionFormSubmitted = false;
-        this.actionForm.reset();
-        this.actionForm.setValue(this.action);
-    }
+        this.actionForm.setControl('indexName',
+            new FormControl(this.action.indexName || '$APP_NAME', [
+                Validators.required
+            ]));
 
-    public save() {
-        this.actionFormSubmitted = true;
+        this.actionForm.setControl('indexType',
+            new FormControl(this.action.indexType || '$SCHEMA_NAME'));
 
-        if (this.actionForm.valid) {
-            const action = this.actionForm.value;
+        this.actionForm.setControl('username',
+            new FormControl(this.action.username));
 
-            this.actionChanged.emit(action);
-        }
+        this.actionForm.setControl('password',
+            new FormControl(this.action.password));
     }
 }

src/Squidex/app/features/rules/pages/rules/actions/fastly-action.component.html

@@ -1,6 +1,6 @@
 <h3 class="wizard-title">Purge cache entries in Fastly</h3>
 
-<form [formGroup]="actionForm" class="form-horizontal" (ngSubmit)="save()">
+<div [formGroup]="actionForm" class="form-horizontal">
     <div class="form-group row">
         <label class="col col-3 col-form-label" for="serviceId">Service ID</label>
 
@@ -28,4 +28,4 @@
             </small>
         </div>
     </div>
-</form>
+</div>

src/Squidex/app/features/rules/pages/rules/actions/fastly-action.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'sqx-fastly-action',
@@ -17,44 +17,21 @@ export class FastlyActionComponent implements OnInit {
     @Input()
     public action: any;
 
-    @Output()
-    public actionChanged = new EventEmitter<object>();
+    @Input()
+    public actionForm: FormGroup;
 
+    @Input()
     public actionFormSubmitted = false;
-    public actionForm =
-        this.formBuilder.group({
-            serviceId: ['',
-                [
-                    Validators.required
-                ]
-            ],
-            apiKey: ['',
-                [
-                    Validators.required
-                ]
-            ]
-        });
-
-    constructor(
-        private readonly formBuilder: FormBuilder
-    ) {
-    }
 
     public ngOnInit() {
-        this.action = Object.assign({}, { serviceId: '', apiKey: '' }, this.action || {});
-
-        this.actionFormSubmitted = false;
-        this.actionForm.reset();
-        this.actionForm.setValue(this.action);
-    }
-
-    public save() {
-        this.actionFormSubmitted = true;
-
-        if (this.actionForm.valid) {
-            const action = this.actionForm.value;
-
-            this.actionChanged.emit(action);
-        }
+        this.actionForm.setControl('serviceId',
+            new FormControl(this.action.serviceId || '', [
+                Validators.required
+            ]));
+
+        this.actionForm.setControl('apiKey',
+            new FormControl(this.action.apiKey || '', [
+                Validators.required
+            ]));
     }
 }

src/Squidex/app/features/rules/pages/rules/actions/slack-action.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'sqx-slack-action',
@@ -17,40 +17,21 @@ export class SlackActionComponent implements OnInit {
     @Input()
     public action: any;
 
-    @Output()
-    public actionChanged = new EventEmitter<object>();
+    @Input()
+    public actionForm: FormGroup;
 
+    @Input()
     public actionFormSubmitted = false;
-    public actionForm =
-        this.formBuilder.group({
-            webhookUrl: ['',
-                [
-                    Validators.required
-                ]
-            ],
-            text: ''
-        });
-
-    constructor(
-        private readonly formBuilder: FormBuilder
-    ) {
-    }
 
     public ngOnInit() {
-        this.action = Object.assign({}, { webhookUrl: '', text: '' }, this.action || {});
-
-        this.actionFormSubmitted = false;
-        this.actionForm.reset();
-        this.actionForm.setValue(this.action);
-    }
-
-    public save() {
-        this.actionFormSubmitted = true;
-
-        if (this.actionForm.valid) {
-            const action = this.actionForm.value;
-
-            this.actionChanged.emit(action);
-        }
+        this.actionForm.setControl('webhookUrl',
+            new FormControl(this.action.webhookUrl || '', [
+                Validators.required
+            ]));
+
+        this.actionForm.setControl('text',
+            new FormControl(this.action.text || '', [
+                Validators.required
+            ]));
     }
 }

src/Squidex/app/features/rules/pages/rules/actions/webhook-action.component.html

@@ -1,6 +1,6 @@
 <h3 class="wizard-title">Send event payload to webhook</h3>
 
-<form [formGroup]="actionForm" class="form-horizontal" (ngSubmit)="save()">
+<div [formGroup]="actionForm" class="form-horizontal">
     <div class="form-group row">
         <label class="col col-3 col-form-label" for="url">Url</label>
 
@@ -28,4 +28,4 @@
             </small>
         </div>
     </div>
-</form>
+</div>

src/Squidex/app/features/rules/pages/rules/actions/webhook-action.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 
 @Component({
     selector: 'sqx-webhook-action',
@@ -17,40 +17,19 @@ export class WebhookActionComponent implements OnInit {
     @Input()
     public action: any;
 
-    @Output()
-    public actionChanged = new EventEmitter<object>();
+    @Input()
+    public actionForm: FormGroup;
 
+    @Input()
     public actionFormSubmitted = false;
-    public actionForm =
-        this.formBuilder.group({
-            url: ['',
-                [
-                    Validators.required
-                ]
-            ],
-            sharedSecret: ''
-        });
-
-    constructor(
-        private readonly formBuilder: FormBuilder
-    ) {
-    }
 
     public ngOnInit() {
-        this.action = Object.assign({}, { url: '', sharedSecret: '' }, this.action || {});
-
-        this.actionFormSubmitted = false;
-        this.actionForm.reset();
-        this.actionForm.setValue(this.action);
-    }
-
-    public save() {
-        this.actionFormSubmitted = true;
-
-        if (this.actionForm.valid) {
-            const action = this.actionForm.value;
+        this.actionForm.setControl('url',
+            new FormControl(this.action.url || '', [
+                Validators.required
+            ]));
 
-            this.actionChanged.emit(action);
-        }
+        this.actionForm.setControl('sharedSecret',
+            new FormControl(this.action.sharedSecret || ''));
     }
 }

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html

@@ -1,4 +1,4 @@
-<sqx-modal-dialog large="true" (closed)="cancel()">
+<sqx-modal-dialog large="true" fullHeight="true" (closed)="cancel()">
     <ng-container title>
         <ng-container *ngIf="mode === 'EditTrigger'">
             Edit Trigger
@@ -32,22 +32,26 @@
             </span>
         </ng-container>
         
-        <ng-container *ngIf="step === 2 && schemas">       
-            <ng-container [ngSwitch]="triggerType">
-                <ng-container *ngSwitchCase="'AssetChanged'">
-                    <sqx-asset-changed-trigger #triggerControl
-                        [trigger]="trigger" 
-                        (triggerChanged)="selectTrigger($event)">
-                    </sqx-asset-changed-trigger>
+        <ng-container *ngIf="step === 2 && schemas">
+            <form [formGroup]="triggerForm.form" (submit)="saveTrigger()">  
+                <ng-container [ngSwitch]="triggerType">
+                    <ng-container *ngSwitchCase="'AssetChanged'">
+                        <sqx-asset-changed-trigger
+                            [trigger]="trigger"
+                            [triggerForm]="triggerForm.form"
+                            [triggerFormSubmitted]="triggerForm.submitted | async">
+                        </sqx-asset-changed-trigger>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'ContentChanged'">
+                        <sqx-content-changed-trigger
+                            [schemas]="schemas"
+                            [trigger]="trigger"
+                            [triggerForm]="triggerForm.form"
+                            [triggerFormSubmitted]="triggerForm.submitted | async">
+                        </sqx-content-changed-trigger>
+                    </ng-container>
                 </ng-container>
-                <ng-container *ngSwitchCase="'ContentChanged'">
-                    <sqx-content-changed-trigger #triggerControl
-                        [schemas]="schemas" 
-                        [trigger]="trigger" 
-                        (triggerChanged)="selectTrigger($event)">
-                    </sqx-content-changed-trigger>
-                </ng-container>
-            </ng-container>
+            </form>
         </ng-container>
     
         <ng-container *ngIf="step === 3">        
@@ -62,61 +66,71 @@
         </ng-container>
     
         <ng-container *ngIf="step === 4">
-            <ng-container [ngSwitch]="actionType">
-                <ng-container *ngSwitchCase="'Algolia'">
-                    <sqx-algolia-action #actionControl
-                        [action]="action" 
-                        (actionChanged)="selectAction($event)">
-                    </sqx-algolia-action>
-                </ng-container>
-                <ng-container *ngSwitchCase="'AzureQueue'">
-                    <sqx-azure-queue-action #actionControl
-                        [action]="action" 
-                        (actionChanged)="selectAction($event)">
-                    </sqx-azure-queue-action>
-                </ng-container>
-                <ng-container *ngSwitchCase="'ElasticSearch'">
-                    <sqx-elastic-search-action #actionControl
-                        [action]="action" 
-                        (actionChanged)="selectAction($event)">
-                    </sqx-elastic-search-action>
-                </ng-container>
-                <ng-container *ngSwitchCase="'Fastly'">
-                    <sqx-fastly-action #actionControl
-                        [action]="action" 
-                        (actionChanged)="selectAction($event)">
-                    </sqx-fastly-action>
+            <form [formGroup]="actionForm.form" (submit)="saveAction()">
+                <ng-container [ngSwitch]="actionType">
+                    <ng-container *ngSwitchCase="'Algolia'">
+                        <sqx-algolia-action
+                            [action]="action"
+                            [actionForm]="actionForm.form"
+                            [actionFormSubmitted]="actionForm.submitted | async">
+                        </sqx-algolia-action>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'AzureQueue'">
+                        <sqx-azure-queue-action
+                            [action]="action"
+                            [actionForm]="actionForm.form"
+                            [actionFormSubmitted]="actionForm.submitted | async">
+                        </sqx-azure-queue-action>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'ElasticSearch'">
+                        <sqx-elastic-search-action
+                            [action]="action"
+                            [actionForm]="actionForm.form"
+                            [actionFormSubmitted]="actionForm.submitted | async">
+                        </sqx-elastic-search-action>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'Fastly'">
+                        <sqx-fastly-action
+                            [action]="action"
+                            [actionForm]="actionForm.form"
+                            [actionFormSubmitted]="actionForm.submitted | async">
+                        </sqx-fastly-action>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'Slack'">
+                        <sqx-slack-action
+                            [action]="action"
+                            [actionForm]="actionForm.form"
+                            [actionFormSubmitted]="actionForm.submitted | async">
+                        </sqx-slack-action>
+                    </ng-container>
+                    <ng-container *ngSwitchCase="'Webhook'">
+                        <sqx-webhook-action        
+                            [action]="action"
+                            [actionForm]="actionForm.form"
+                            [actionFormSubmitted]="actionForm.submitted | async">
+                        </sqx-webhook-action>
+                    </ng-container>
                 </ng-container>
-                <ng-container *ngSwitchCase="'Slack'">
-                    <sqx-slack-action #actionControl
-                        [action]="action" 
-                        (actionChanged)="selectAction($event)">
-                    </sqx-slack-action>
-                </ng-container>
-                <ng-container *ngSwitchCase="'Webhook'">
-                    <sqx-webhook-action #actionControl
-                        [action]="action" 
-                        (actionChanged)="selectAction($event)">
-                    </sqx-webhook-action>
-                </ng-container>
-            </ng-container>
+            </form>
         </ng-container>
     </ng-container>
 
     <ng-container footer>
-        <ng-container *ngIf="mode === 'Wizard' && step === 2">
-            <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
-            <button type="submit" class="float-right btn btn-primary" (click)="triggerControl.save()">Next</button>
-        </ng-container>
-        
-        <ng-container *ngIf="mode !== 'Wizard' && step === 2">
-            <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
-            <button type="submit" class="float-right btn btn-primary" (click)="triggerControl.save()">Save</button>
-        </ng-container>
+        <div>
+            <ng-container *ngIf="mode === 'Wizard' && step === 2">
+                <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
+                <button type="submit" class="float-right btn btn-primary" (click)="saveTrigger()">Next</button>
+            </ng-container>
+            
+            <ng-container *ngIf="mode !== 'Wizard' && step === 2">
+                <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
+                <button type="submit" class="float-right btn btn-primary" (click)="saveTrigger()">Save</button>
+            </ng-container>
 
-        <ng-container *ngIf="step === 4">
-            <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
-            <button type="submit" class="float-right btn btn-primary" (click)="actionControl.save()">Save</button>
-        </ng-container>
+            <ng-container *ngIf="step === 4">
+                <button type="reset" class="float-left btn btn-secondary" (click)="cancel()">Cancel</button>
+                <button type="submit" class="float-right btn btn-primary" (click)="saveAction()">Save</button>
+            </ng-container>
+        </div>
     </ng-container>
 </sqx-modal-dialog>

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.scss

@@ -1,34 +1,6 @@
 @import '_vars';
 @import '_mixins';
 
-.modal {
-    &-dialog {
-        height: 70%;
-    }
-
-    &-content {
-        min-height: 100%;
-        max-height: 100%;
-    }
-
-    &-body {
-        overflow-y: auto;
-    }
-
-    &-header {
-        @include flex-shrink(0);
-    }
-
-    &-footer {
-        @include flex-shrink(0);
-    }
-
-    &-form {
-        padding-top: 1em;
-        padding-bottom: 0;
-    }
-}
-
 .rule-element {
     margin-right: .5rem;
 }

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.ts

@@ -5,12 +5,14 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 
 import {
     AppContext,
     CreateRuleDto,
     DateTime,
+    Form,
     ruleActions,
     ruleTriggers,
     RuleDto,
@@ -35,17 +37,15 @@ export class RuleWizardComponent implements OnInit {
     public ruleActions = ruleActions;
     public ruleTriggers = ruleTriggers;
 
-    public triggerType: string;
-    public trigger: any = {};
+    public actionForm = new Form<FormGroup>(new FormGroup({}));
     public actionType: string;
     public action: any = {};
-    public step = 1;
 
-    @ViewChild('triggerControl')
-    public triggerControl: any;
+    public triggerForm = new Form<FormGroup>(new FormGroup({}));
+    public triggerType: string;
+    public trigger: any = {};
 
-    @ViewChild('actionControl')
-    public actionControl: any;
+    public step = 1;
 
     @Output()
     public cancelled = new EventEmitter();
@@ -74,17 +74,13 @@ export class RuleWizardComponent implements OnInit {
         if (this.mode === MODE_EDIT_ACTION) {
             this.step = 4;
 
-            this.action = Object.assign({}, this.rule.action);
+            this.action = this.rule.action;
             this.actionType = this.rule.actionType;
-
-            delete this.action.actionType;
         } else if (this.mode === MODE_EDIT_TRIGGER) {
             this.step = 2;
 
-            this.trigger = Object.assign({}, this.rule.trigger);
+            this.trigger = this.rule.trigger;
             this.triggerType = this.rule.triggerType;
-
-            delete this.trigger.triggerType;
         }
     }
 
@@ -98,23 +94,31 @@ export class RuleWizardComponent implements OnInit {
         this.step++;
     }
 
-    public selectTrigger(value: any) {
-        this.trigger = Object.assign({}, value, { triggerType: this.triggerType });
+    public saveTrigger() {
+        const value = this.triggerForm.submit();
 
-        if (this.mode === MODE_WIZARD) {
-            this.step++;
-        } else {
-            this.updateTrigger();
+        if (value) {
+            this.trigger = { ...value, triggerType: this.triggerType };
+
+            if (this.mode === MODE_WIZARD) {
+                this.step++;
+            } else {
+                this.updateTrigger();
+            }
         }
     }
 
-    public selectAction(value: any) {
-        this.action = Object.assign({}, value, { actionType: this.actionType });
+    public saveAction() {
+        const value = this.actionForm.submit();
+
+        if (value) {
+            this.action = { ...value, actionType: this.actionType };
 
-        if (this.mode === MODE_WIZARD) {
-            this.createRule();
-        } else {
-            this.updateAction();
+            if (this.mode === MODE_WIZARD) {
+                this.createRule();
+            } else {
+                this.updateAction();
+            }
         }
     }
 

src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.html

@@ -1,7 +1,6 @@
 <h3 class="wizard-title">Trigger rule when asset has been...</h3>
 
-
-<form [formGroup]="triggerForm" class="form-horizontal" (ngSubmit)="save()">
+<div [formGroup]="triggerForm" class="form-horizontal">
     <div class="form-group">
         <div class="form-check">
             <input class="form-check-input" type="checkbox" id="sendCreate" formControlName="sendCreate" />
@@ -34,4 +33,4 @@
             </label>
         </div>
     </div>
-</form>
+</div>

src/Squidex/app/features/rules/pages/rules/triggers/asset-changed-trigger.component.ts

@@ -5,8 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 
 @Component({
     selector: 'sqx-asset-changed-trigger',
@@ -17,43 +17,23 @@ export class AssetChangedTriggerComponent implements OnInit {
     @Input()
     public trigger: any;
 
-    @Output()
-    public triggerChanged = new EventEmitter<object>();
+    @Input()
+    public triggerForm: FormGroup;
 
+    @Input()
     public triggerFormSubmitted = false;
-    public triggerForm =
-        this.formBuilder.group({
-            sendCreate: false,
-            sendUpdate: false,
-            sendRename: false,
-            sendDelete: false
-        });
-
-    constructor(
-        private readonly formBuilder: FormBuilder
-    ) {
-    }
 
     public ngOnInit() {
-        this.trigger = Object.assign({}, {
-            sendCreate: false,
-            sendUpdate: false,
-            sendRename: false,
-            sendDelete: false
-        }, this.trigger || {});
-
-        this.triggerFormSubmitted = false;
-        this.triggerForm.reset();
-        this.triggerForm.setValue(this.trigger);
-    }
+        this.triggerForm.setControl('sendCreate',
+            new FormControl(this.trigger.sendCreate || false));
 
-    public save() {
-        this.triggerFormSubmitted = true;
+        this.triggerForm.setControl('sendUpdate',
+            new FormControl(this.trigger.sendUpdate || false));
 
-        if (this.triggerForm.valid) {
-            const trigger = this.triggerForm.value;
+        this.triggerForm.setControl('sendRename',
+            new FormControl(this.trigger.sendRename || false));
 
-            this.triggerChanged.emit(trigger);
-        }
+        this.triggerForm.setControl('sendDelete',
+            new FormControl(this.trigger.sendDelete || false));
     }
 }

src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.html

@@ -60,7 +60,7 @@
     </tr>
 </table>
 
-<div class="section" *ngIf="!handleAll && schemasToAdd.length > 0">
+<div class="section" *ngIf="!triggerForm.controls.handleAll.value && schemasToAdd.length > 0">
     <form class="form-inline" (ngSubmit)="addSchema()">
         <div class="form-group mr-1">
             <select class="form-control schemas-control" [(ngModel)]="schemaToAdd" name="schema">
@@ -72,9 +72,11 @@
     </form>
 </div>
 
-<div class="form-check">
-    <input class="form-check-input" type="checkbox" [(ngModel)]="handleAll" id="handleAll" />
-    <label class="form-check-label" for="handleAll">
-        Trigger on all content events
-    </label>
+<div class="form-group" [formGroup]="triggerForm">
+    <div class="form-check">
+        <input class="form-check-input" type="checkbox" id="handleAll" formControlName="handleAll" />
+        <label class="form-check-label" for="handleAll">
+            Trigger on all content events
+        </label>
+    </div>
 </div>

src/Squidex/app/features/rules/pages/rules/triggers/content-changed-trigger.component.ts

@@ -5,7 +5,8 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
 
 import {
     ImmutableArray,
@@ -34,10 +35,11 @@ export class ContentChangedTriggerComponent implements OnInit {
     @Input()
     public trigger: any;
 
-    @Output()
-    public triggerChanged = new EventEmitter<object>();
+    @Input()
+    public triggerForm: FormGroup;
 
-    public handleAll = false;
+    @Input()
+    public triggerFormSubmitted = false;
 
     public triggerSchemas: ImmutableArray<TriggerSchemaForm>;
 
@@ -49,9 +51,13 @@ export class ContentChangedTriggerComponent implements OnInit {
     }
 
     public ngOnInit() {
-        const triggerSchemas: any[] = (this.trigger.schemas = this.trigger.schemas || []);
+        this.triggerForm.setControl('schemas',
+            new FormControl(this.trigger.schemas || {}));
 
-        this.handleAll = Types.isBoolean(this.trigger.handleAll) ? this.trigger.handleAll : false;
+        this.triggerForm.setControl('handleAll',
+            new FormControl(Types.isBoolean(this.trigger.handleAll) ? this.trigger.handleAll : false));
+
+        const triggerSchemas: any[] = (this.trigger.schemas = this.trigger.schemas || []);
 
         this.triggerSchemas =
             ImmutableArray.of(
@@ -81,24 +87,11 @@ export class ContentChangedTriggerComponent implements OnInit {
         this.schemaToAdd = this.schemasToAdd.values[0];
     }
 
-    public save() {
-        const schemas =
-            this.triggerSchemas.values.map(s => {
-                return {
-                    schemaId: s.schema.id,
-                    sendCreate: s.sendCreate,
-                    sendUpdate: s.sendUpdate,
-                    sendDelete: s.sendDelete,
-                    sendPublish: s.sendPublish
-                };
-            });
-
-        this.triggerChanged.emit({ schemas, handleAll: this.handleAll });
-    }
-
     public removeSchema(schemaForm: TriggerSchemaForm) {
         this.triggerSchemas = this.triggerSchemas.remove(schemaForm);
 
+        this.updateValue();
+
         this.schemasToAdd = this.schemasToAdd.push(schemaForm.schema).sortByStringAsc(x => x.name);
         this.schemaToAdd = this.schemasToAdd.values[0];
     }
@@ -115,6 +108,8 @@ export class ContentChangedTriggerComponent implements OnInit {
                     sendPublish: false
                 })).sortByStringAsc(x => x.schema.name);
 
+        this.updateValue();
+
         this.schemasToAdd = this.schemasToAdd.remove(this.schemaToAdd).sortByStringAsc(x => x.name);
         this.schemaToAdd = this.schemasToAdd.values[0];
     }
@@ -123,12 +118,31 @@ export class ContentChangedTriggerComponent implements OnInit {
         const newSchema = this.updateSendAll(Object.assign({}, schemaForm, { [property]: !schemaForm[property] }));
 
         this.triggerSchemas = this.triggerSchemas.replace(schemaForm, newSchema);
+
+        this.updateValue();
     }
 
     public toggleAll(schemaForm: TriggerSchemaForm) {
         const newSchema = this.updateAll(<any>{ schema: schemaForm.schema }, !schemaForm.sendAll);
 
         this.triggerSchemas = this.triggerSchemas.replace(schemaForm, newSchema);
+
+        this.updateValue();
+    }
+
+    private updateValue() {
+        const schemas =
+            this.triggerSchemas.values.map(s => {
+                return {
+                    schemaId: s.schema.id,
+                    sendCreate: s.sendCreate,
+                    sendUpdate: s.sendUpdate,
+                    sendDelete: s.sendDelete,
+                    sendPublish: s.sendPublish
+                };
+            });
+
+        this.triggerForm.controls['schemas'].setValue(schemas);
     }
 
     private updateAll(schemaForm: TriggerSchemaForm, value: boolean): TriggerSchemaForm {
@@ -137,6 +151,7 @@ export class ContentChangedTriggerComponent implements OnInit {
         schemaForm.sendUpdate = value;
         schemaForm.sendDelete = value;
         schemaForm.sendPublish = value;
+
         return schemaForm;
     }
 

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -108,9 +108,7 @@ export class SchemaPageComponent implements OnDestroy, OnInit {
     private export() {
         const result: any = {
             fields: this.schema.fields.map(field => {
-                const copy: any = Object.assign({}, field);
-
-                delete copy.fieldId;
+                const { fieldId, ...copy } = field;
 
                 for (const key in copy.properties) {
                     if (copy.properties.hasOwnProperty(key)) {

src/Squidex/app/features/schemas/pages/schema/types/string-validation.component.html

@@ -36,7 +36,7 @@
             <div *ngIf="patterns.length > 0 && (patternsModal.isOpen | async) && (showPatternSuggestions | async)" [sqxModalTarget]="patternInput" class="control-dropdown">
                 <h4>Suggestions</h4>
 
-                <div *ngFor="let pattern of pattern" class="control-dropdown-item control-dropdown-item-selectable" (mousedown)="setPattern(suggestion)">
+                <div *ngFor="let pattern of pattern" class="control-dropdown-item control-dropdown-item-selectable" (mousedown)="setPattern(pattern)">
                     <div class="truncate">{{pattern.name}}</div>
                     <div class="truncate text-muted">{{pattern.pattern}}</div>
                 </div>

src/Squidex/app/framework/angular/modals/dialog-renderer.component.html

@@ -2,11 +2,11 @@
 
 <sqx-modal-dialog *sqxModalView="dialogView;onRoot:true" showClose="false">
     <ng-container title>
-        {{dialogRequest.title}}
+        {{dialogRequest?.title}}
     </ng-container>
 
     <ng-container content>
-        {{dialogRequest.text}}
+        {{dialogRequest?.text}}
     </ng-container>
 
     <ng-container footer>