Implement update profile with Extensible-form

npm/ng-packs/packages/account/src/lib/account.module.ts

@@ -19,8 +19,6 @@ import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
 import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token';
 import { AccountExtensionsGuard } from './guards/extensions.guard';
 import { HalfRowComponent } from './components/personal-settings/half-row/half-row.component';
-import { NameSurnameComponent } from './components/personal-settings/name-surname/name-surname.component';
-
 const declarations = [
   LoginComponent,
   RegisterComponent,
@@ -30,7 +28,6 @@ const declarations = [
   ForgotPasswordComponent,
   ResetPasswordComponent,
   HalfRowComponent,
-  NameSurnameComponent
 ];
 
 @NgModule({

npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts

@@ -5,12 +5,11 @@ import {ControlContainer, FormGroup, FormGroupDirective} from "@angular/forms";
 @Component({
   selector: 'abp-half-row',
   template: `
-    <div class="col col-md-6">
+    <div class="w-50 d-inline">
       <div class="mb-3 form-group"  >
-        <label for="surname" class="form-label">{{
+        <label [attr.for]="name" class="form-label">{{
           displayName | abpLocalization
           }}
-          {{name}}
         </label>
         <input type="text" [attr.id]="id" class="form-control"  [attr.name]="name" [formControlName]="name"/>
       </div>

npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts

@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import {ControlContainer, FormGroupDirective} from "@angular/forms";
-
-@Component({
-  selector: 'abp-name-surname',
-  template: `<div class="row">
-    <div class="col col-md-6">
-      <div class="mb-3 form-group">
-        <label for="name" class="form-label">{{
-          'AbpIdentity::DisplayName:Name' | abpLocalization
-          }}</label
-        ><input type="text" id="name" class="form-control" formControlName="name" />
-      </div>
-    </div>
-    <div class="col col-md-6">
-      <div class="mb-3 form-group">
-        <label for="surname" class="form-label">{{
-          'AbpIdentity::DisplayName:Surname' | abpLocalization
-          }}</label
-        ><input type="text" id="surname" class="form-control" formControlName="surname" />
-      </div>
-    </div>
-  </div>`,
-  styles: [],
-  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
-
-})
-export class NameSurnameComponent  {
-  constructor() {}
-}

npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html

@@ -1,4 +1,3 @@
-<h1>Thor</h1>
 <form [formGroup]="form"   *ngIf="form"  (ngSubmit)="submit()" validateOnSubmit>
   <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
 

npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts

@@ -1,7 +1,7 @@
 import {ePropType, FormProp} from "@abp/ng.theme.shared/extensions";
 import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
 import {Validators} from "@angular/forms";
- import {NameSurnameComponent} from "../components/personal-settings/name-surname/name-surname.component";
+ import {HalfRowComponent} from "../components/personal-settings/half-row/half-row.component";
 
 const { maxLength, required, email } = Validators;
 export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<UpdateProfileDto>([
@@ -17,16 +17,18 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     name: 'name',
     displayName: 'AbpIdentity::DisplayName:Name',
     id: 'name',
-    validators: () => [maxLength(64),required],
-    template:NameSurnameComponent
+    validators: () => [maxLength(64)],
+    template:HalfRowComponent,
+    className:"d-inline-block w-50"
   },
   {
     type: ePropType.String,
     name: 'surname',
     displayName: 'AbpIdentity::DisplayName:Surname',
     id: 'surname',
-    validators: () => [maxLength(64),required],
-    visible:() => false
+    validators: () => [maxLength(64)],
+    className:"d-inline-block w-50 ps-4",
+    template:HalfRowComponent
   },
   {
     type: ePropType.String,

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -3,7 +3,6 @@
 
   <ng-template ngSwitchCase="template">
     <ng-container
-       [formControlName]="prop.name"
       *ngComponentOutlet="prop.template;injector:injectorForCustomComponent">
     </ng-container>
   </ng-template>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts

@@ -191,7 +191,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
             provide: FORM_PROP_DATA_STREAM,
             useValue: currentProp
           },
-
+          { provide: ControlContainer, useExisting: FormGroupDirective }
         ],
         parent: this.injector,
       });

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html

@@ -6,11 +6,11 @@
           [formGroupName]="extraPropertiesKey"
           *ngIf="extraProperties.controls[prop.name]; else tempDefault"
         >
-          <abp-extensible-form-prop [prop]="prop" [data]="data"></abp-extensible-form-prop>
+          <abp-extensible-form-prop [class]="prop.className" [prop]="prop" [data]="data"></abp-extensible-form-prop>
         </ng-container>
 
         <ng-template #tempDefault>
-          <abp-extensible-form-prop
+          <abp-extensible-form-prop [class]="prop.className"
             *ngIf="form.get(prop.name)"
             [prop]="prop"
             [data]="data"

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts

@@ -10,7 +10,7 @@ import {
   SkipSelf,
   ViewChildren,
 } from '@angular/core';
-import { ControlContainer, FormGroup } from '@angular/forms';
+import {ControlContainer, FormGroup, FormGroupDirective} from '@angular/forms';
 import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
 import { FormPropList } from '../../models/form-props';
 import { ExtensionsService } from '../../services/extensions.service';
@@ -62,3 +62,6 @@ export class ExtensibleFormComponent<R = any> {
     @Inject(EXTENSIONS_IDENTIFIER) private identifier: string,
   ) {}
 }
+
+
+export const ExtensibleFormViewProvider = { provide: ControlContainer, useExisting: FormGroupDirective }

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts

@@ -39,6 +39,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly options: PropCallback<R, Observable<ABP.Option<any>[]>> | undefined;
   readonly id: string | undefined;
   readonly template? : Type<any>
+  readonly className?:string;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -48,7 +49,8 @@ export class FormProp<R = any> extends Prop<R> {
       options.permission,
       options.visible,
       options.isExtra,
-      options.template
+      options.template,
+      options.className
     );
 
     this.asyncValidators = options.asyncValidators || (_ => []);

npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts

@@ -33,7 +33,8 @@ export abstract class Prop<R = any> {
     public readonly permission: string,
     public readonly visible: PropPredicate<R> = _ => true,
     public readonly isExtra = false,
-    public readonly template? : Type<any>
+    public readonly template? : Type<any>,
+    public readonly className?:string
   ) {
     this.displayName = this.displayName || this.name;
   }