App form.

src/Squidex/app/features/administration/pages/users/user-page.component.ts

@@ -22,14 +22,14 @@ export class UserPageComponent implements OnDestroy, OnInit {
     private selectedUserSubscription: Subscription;
     private user?: UserDto;
 
-    public userForm: UserForm;
+    public userForm = new UserForm(this.formBuilder);
 
-    constructor(formBuilder: FormBuilder,
+    constructor(
         public readonly usersState: UsersState,
+        private readonly formBuilder: FormBuilder,
         private readonly route: ActivatedRoute,
         private readonly router: Router
     ) {
-        this.userForm = new UserForm(formBuilder);
     }
 
     public ngOnDestroy() {

src/Squidex/app/features/apps/pages/apps-page.component.html

@@ -81,5 +81,5 @@
 </ng-container>
 
 <ng-container *sqxModalView="onboardingModal;onRoot:true;closeAuto:false">
-    <sqx-onboarding-dialog (close)="onboardingModal.hide()"></sqx-onboarding-dialog>
+    <sqx-onboarding-dialog (closed)="onboardingModal.hide()"></sqx-onboarding-dialog>
 </ng-container>

src/Squidex/app/features/apps/pages/onboarding-dialog.component.html

@@ -1,6 +1,6 @@
 <sqx-modal-dialog [showHeader]="false">
     <ng-container content>
-        <a class="header-right modal-close" (click)="close.emit()">Skip Tour</a>
+        <a class="header-right modal-close" (click)="close()">Skip Tour</a>
 
         <div class="onboarding-step" *ngIf="step === 0">
             <img @fade class="header-left" src="/images/logo-white-small.png" />

src/Squidex/app/features/apps/pages/onboarding-dialog.component.ts

@@ -21,7 +21,11 @@ export class OnboardingDialogComponent {
     public step = 0;
 
     @Output()
-    public close = new EventEmitter();
+    public closed = new EventEmitter();
+
+    public close() {
+        this.closed.emit();
+    }
 
     public next() {
         this.step = this.step + 1;

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

@@ -32,12 +32,12 @@ export class FieldWizardComponent {
 
     public fieldTypes = fieldTypes;
 
-    public addFieldForm: AddFieldForm;
+    public addFieldForm = new AddFieldForm(this.formBuilder);
 
-    constructor(formBuilder: FormBuilder,
+    constructor(
+        private readonly formBuilder: FormBuilder,
         private readonly schemasState: SchemasState
     ) {
-        this.addFieldForm = new AddFieldForm(formBuilder);
     }
 
     public complete() {

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

@@ -26,12 +26,12 @@ export class SchemaEditFormComponent implements OnInit {
     @Input()
     public schema: SchemaDetailsDto;
 
-    public editForm: EditSchemaForm;
+    public editForm = new EditSchemaForm(this.formBuilder);
 
-    constructor(formBuilder: FormBuilder,
+    constructor(
+        private readonly formBuilder: FormBuilder,
         private readonly schemasState: SchemasState
     ) {
-        this.editForm = new EditSchemaForm(formBuilder);
     }
 
     public ngOnInit() {

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

@@ -28,12 +28,12 @@ export class SchemaScriptsFormComponent implements OnInit {
 
     public selectedField = 'scriptQuery';
 
-    public editForm: EditScriptsForm;
+    public editForm = new EditScriptsForm(this.formBuilder);
 
-    constructor(formBuilder: FormBuilder,
+    constructor(
+        private readonly formBuilder: FormBuilder,
         private readonly schemasState: SchemasState
     ) {
-        this.editForm = new EditScriptsForm(formBuilder);
     }
 
     public ngOnInit() {

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

@@ -31,16 +31,16 @@ export class SchemaFormComponent implements OnInit {
     @Input()
     public import: any;
 
-    public createForm: CreateSchemaForm;
+    public createForm = new CreateSchemaForm(this.formBuilder);
 
     public showImport = false;
 
-    constructor(formBuilder: FormBuilder,
+    constructor(
         public readonly apiUrl: ApiUrlConfig,
         public readonly appsState: AppsState,
+        private readonly formBuilder: FormBuilder,
         private readonly schemasState: SchemasState
     ) {
-        this.createForm = new CreateSchemaForm(formBuilder);
     }
 
     public ngOnInit() {

src/Squidex/app/shared/components/app-form.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="createForm" (ngSubmit)="createApp()">
+<form [formGroup]="createForm.form" (ngSubmit)="createApp()">
     <sqx-modal-dialog (close)="complete()">
         <ng-container title>
             <ng-container *ngIf="template; else noTemplate">
@@ -11,17 +11,17 @@
         </ng-container>
 
         <ng-container content>
-            <sqx-form-error [error]="createFormError"></sqx-form-error>
+            <sqx-form-error [error]="createForm.error | async"></sqx-form-error>
         
             <div class="form-group">
                 <label for="appName">Name</label>
                 
-                <sqx-control-errors for="name" submitOnly="true" [submitted]="createFormSubmitted"></sqx-control-errors>
+                <sqx-control-errors for="name" submitOnly="true" [submitted]="createForm.submitted | async"></sqx-control-errors>
         
                 <input type="text" class="form-control" id="appName" formControlName="name" autocomplete="off" sqxLowerCaseInput sqxFocusOnInit />
                 
                 <small class="form-text text-muted">
-                    The app name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}<b>{{appName | async}}</b>/.
+                    The app name becomes part of the api url,<br /> e.g {{apiUrl.buildUrl("api/content/")}}<b>{{createForm.appName | async}}</b>/.
                 </small>
                     
                 <small class="form-text text-muted">

src/Squidex/app/shared/components/app-form.component.ts

@@ -6,17 +6,15 @@
  */
 
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 
 import {
     ApiUrlConfig,
     AppsState,
     CreateAppDto,
-    ValidatorsEx
+    CreateAppForm
 } from '@app/shared/internal';
 
-const FALLBACK_NAME = 'my-app';
-
 @Component({
     selector: 'sqx-app-form',
     styleUrls: ['./app-form.component.scss'],
@@ -29,22 +27,7 @@ export class AppFormComponent {
     @Input()
     public template = '';
 
-    public createFormError = '';
+    public createForm = new CreateAppForm(this.formBuilder);
-    public createFormSubmitted = false;
-    public createForm =
-        this.formBuilder.group({
-            name: ['',
-                [
-                    Validators.required,
-                    Validators.maxLength(40),
-                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes (not at the end).')
-                ]
-            ]
-        });
-
-    public appName =
-        this.createForm.controls['name'].valueChanges.map(n => n || FALLBACK_NAME)
-            .startWith(FALLBACK_NAME);
 
     constructor(public readonly apiUrl: ApiUrlConfig,
         private readonly appsStore: AppsState,
@@ -57,25 +40,17 @@ export class AppFormComponent {
     }
 
     public createApp() {
-        this.createFormSubmitted = true;
+        const value = this.createForm.submit();
-
-        if (this.createForm.valid) {
-            this.createForm.disable();
 
-            const request = new CreateAppDto(this.createForm.controls['name'].value, this.template);
+        if (value) {
+            const request = new CreateAppDto(value.name, this.template);
 
             this.appsStore.createApp(request)
                 .subscribe(dto => {
                     this.complete();
                 }, error => {
-                    this.enableCreateForm(error.displayMessage);
+                    this.createForm.submitFailed(error);
                 });
         }
     }
-
-    private enableCreateForm(message: string) {
-        this.createForm.enable();
-        this.createFormSubmitted = false;
-        this.createFormError = message;
-    }
 }

src/Squidex/app/shared/state/apps.state.ts

@@ -6,15 +6,18 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import '@app/framework/utils/rxjs-extensions';
-
 import { Injectable } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Observable } from 'rxjs';
 
+import '@app/framework/utils/rxjs-extensions';
+
 import {
     DateTime,
+    Form,
     ImmutableArray,
-    State
+    State,
+    ValidatorsEx
 } from '@app/framework';
 
 import {
@@ -23,6 +26,26 @@ import {
     CreateAppDto
 } from './../services/apps.service';
 
+const FALLBACK_NAME = 'my-app';
+
+export class CreateAppForm extends Form<FormGroup> {
+    public appName =
+        this.form.controls['name'].valueChanges.map(n => n || FALLBACK_NAME)
+            .startWith(FALLBACK_NAME);
+
+    constructor(formBuilder: FormBuilder) {
+        super(formBuilder.group({
+            name: ['',
+                [
+                    Validators.required,
+                    Validators.maxLength(40),
+                    ValidatorsEx.pattern('[a-z0-9]+(\-[a-z0-9]+)*', 'Name can contain lower case letters (a-z), numbers and dashes (not at the end).')
+                ]
+            ]
+        }));
+    }
+}
+
 interface Snapshot {
     apps: ImmutableArray<AppDto>;