d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { coerceBooleanProperty, keycodes } from 'ngx-tethys/util';

import {
    AfterViewInit,
    ContentChildren,
    Directive,
    ElementRef,
    HostBinding,
    Inject,
    Input,
    NgZone,
    OnDestroy,
    OnInit,
    QueryList,
    Renderer2
} from '@angular/core';
import { ControlContainer, NgControl, NgForm } from '@angular/forms';
import { useHostRenderer } from '@tethys/cdk/dom';

import { ThyFormValidatorService } from './form-validator.service';
import { THY_FORM_CONFIG, ThyFormConfig, ThyFormLayout, ThyFormValidatorConfig } from './form.class';

// 1. submit 按 Enter 键提交, Textare或包含[contenteditable]属性的元素 除外，需要按 Ctrl | Command + Enter 提交
// 2. alwaysSubmit 不管是哪个元素 按 Enter 键都提交
// 3. forbidSubmit  Enter 键禁止提交
// 默认 submit
export enum ThyEnterKeyMode {
    submit = 'submit',
    alwaysSubmit = 'alwaysSubmit',
    forbidSubmit = 'forbidSubmit'
}

/**
 * 表单
 * @name thyForm,[thy-form]
 * @order 10
 */
@Directive({
    selector: '[thyForm],[thy-form]',
    providers: [ThyFormValidatorService],
    exportAs: 'thyForm',
    host: {
        class: 'thy-form'
    },
    standalone: true
})
export class ThyFormDirective implements OnInit, AfterViewInit, OnDestroy {
    private layout: ThyFormLayout;

    private initialized = false;

    private hostRenderer = useHostRenderer();

    /**
     * 布局，默认水平居中 horizontal，其他2种布局待开发
     * @type horizontal | vertical | inline
     * @default horizontal
     */
    @Input()
    set thyLayout(value: ThyFormLayout) {
        if (value) {
            this.layout = value;
            if (this.initialized) {
                this.updateClasses();
            }
        }
    }

    get thyLayout(): ThyFormLayout {
        return this.layout;
    }

    get isHorizontal() {
        return this.layout === 'horizontal';
    }

    /**
     * Enter 键提交模式。`submit`: Textarea 需要 Ctrl | Command + Enter 提交，其他元素直接 Enter 提交； `alwaysSubmit`: 不管是什么元素 Enter 都提交； `forbidSubmit`: Enter 不提交
     * @type submit | alwaysSubmit | forbidSubmit
     * @default submit
     */
    @Input() thyEnterKeyMode: ThyEnterKeyMode;

    /**
     * 表单验证规则配置项 （更多内容查看：thyFormValidatorConfig）
     */
    @Input()
    set thyFormValidatorConfig(config: ThyFormValidatorConfig) {
        this.validator.setValidatorConfig(config);
    }

    @HostBinding('class.was-validated') wasValidated = false;

    onSubmitSuccess: ($event: any) => void;

    private _unsubscribe: () => void;

    @ContentChildren(NgControl, {
        descendants: true
    })
    public controls: QueryList<NgControl>;

    constructor(
        private ngForm: ControlContainer,
        private elementRef: ElementRef,
        private renderer: Renderer2,
        private ngZone: NgZone,
        public validator: ThyFormValidatorService,
        @Inject(THY_FORM_CONFIG) private config: ThyFormConfig
    ) {
        this.layout = this.config.layout;
    }

    ngOnInit(): void {
        this.ngZone.runOutsideAngular(() => {
            this._unsubscribe = this.renderer.listen(this.elementRef.nativeElement, 'keydown', this.onKeydown.bind(this));
        });
        this.updateClasses();
        this.initialized = true;
    }

    ngAfterViewInit() {
        this.validator.initialize(this.ngForm as NgForm, this.elementRef.nativeElement);
        this.validator.initializeFormControlsValidation(this.controls.toArray());
        this.controls.changes.subscribe(controls => {
            this.validator.initializeFormControlsValidation(this.controls.toArray());
        });
    }

    submit($event: Event) {
        if (this.validator.validate($event)) {
            this.onSubmitSuccess && this.onSubmitSuccess($event);
        } else {
            // this.wasValidated = true;
        }
    }

    updateClasses() {
        this.hostRenderer.updateClassByMap({
            [`thy-form-${this.thyLayout}`]: true
        });
    }

    submitRunInZone($event: any) {
        this.ngZone.run(() => {
            this.submit($event);
        });
    }

    onKeydown($event: KeyboardEvent) {
        const currentInput = document.activeElement;
        const key = $event.which || $event.keyCode;
        if (key === keycodes.ENTER && currentInput.tagName) {
            if (!this.thyEnterKeyMode || this.thyEnterKeyMode === ThyEnterKeyMode.submit) {
                // TEXTAREA或包含[contenteditable]属性的元素 Ctrl + Enter 或者 Command + Enter 阻止 默认行为并提交
                if (currentInput.tagName === 'TEXTAREA' || coerceBooleanProperty(currentInput.getAttribute('contenteditable'))) {
                    if ($event.ctrlKey || $event.metaKey) {
                        $event.preventDefault();
                        this.submitRunInZone($event);
                    }
                } else {
                    // 不是 TEXTAREA Enter 阻止 默认行为并提交
                    $event.preventDefault();
                    this.submitRunInZone($event);
                }
            } else if (this.thyEnterKeyMode === ThyEnterKeyMode.alwaysSubmit) {
                $event.preventDefault();
                this.submitRunInZone($event);
            } else {
                // do nothing
            }
        }
    }

    ngOnDestroy() {
        if (this._unsubscribe) {
            this._unsubscribe();
            this._unsubscribe = null;
        }
    }
}

1	import { coerceBooleanProperty, keycodes } from 'ngx-tethys/util';
2
3	import {
4	AfterViewInit,
5	ContentChildren,
6	Directive,
7	ElementRef,
8	HostBinding,
9	Inject,
10	Input,
11	NgZone,
12	OnDestroy,
13	OnInit,	1✔
14	QueryList,	1✔
15	Renderer2	1✔
16	} from '@angular/core';	1✔
17	import { ControlContainer, NgControl, NgForm } from '@angular/forms';	2✔
18	import { useHostRenderer } from '@tethys/cdk/dom';
19
20	import { ThyFormValidatorService } from './form-validator.service';
21	import { THY_FORM_CONFIG, ThyFormConfig, ThyFormLayout, ThyFormValidatorConfig } from './form.class';
22
23	// 1. submit 按 Enter 键提交, Textare或包含[contenteditable]属性的元素除外，需要按 Ctrl \| Command + Enter 提交	1✔
24	// 2. alwaysSubmit 不管是哪个元素按 Enter 键都提交
25	// 3. forbidSubmit Enter 键禁止提交	×
26	// 默认 submit	×
27	export enum ThyEnterKeyMode {	×
28	submit = 'submit',	×
29	alwaysSubmit = 'alwaysSubmit',
30	forbidSubmit = 'forbidSubmit'
31	}
32
33	/**	×
34	* 表单
35	* @name thyForm,[thy-form]
36	* @order 10	×
37	*/
38	@Directive({
39	selector: '[thyForm],[thy-form]',	×
40	providers: [ThyFormValidatorService],
41	exportAs: 'thyForm',
42	host: {	×
43	class: 'thy-form'	×
44	},	×
45	standalone: true	×
46	})	×
47	export class ThyFormDirective implements OnInit, AfterViewInit, OnDestroy {	×
48	private layout: ThyFormLayout;	×
49		×
50	private initialized = false;	×
51		×
52	private hostRenderer = useHostRenderer();
53
54	/**	×
55	* 布局，默认水平居中 horizontal，其他2种布局待开发	×
56	* @type horizontal \| vertical \| inline
57	* @default horizontal	×
58	*/	×
59	@Input()
60	set thyLayout(value: ThyFormLayout) {
61	if (value) {	×
62	this.layout = value;	×
63	if (this.initialized) {	×
64	this.updateClasses();	×
65	}
66	}
67	}
68		×
69	get thyLayout(): ThyFormLayout {	×
70	return this.layout;
71	}
72
73	get isHorizontal() {
74	return this.layout === 'horizontal';
75	}
76		×
77	/**
78	* Enter 键提交模式。`submit`: Textarea 需要 Ctrl \| Command + Enter 提交，其他元素直接 Enter 提交； `alwaysSubmit`: 不管是什么元素 Enter 都提交； `forbidSubmit`: Enter 不提交
79	* @type submit \| alwaysSubmit \| forbidSubmit
80	* @default submit
81	*/	×
82	@Input() thyEnterKeyMode: ThyEnterKeyMode;	×
83
84	/**
85	* 表单验证规则配置项（更多内容查看：thyFormValidatorConfig）
86	*/	×
87	@Input()	×
88	set thyFormValidatorConfig(config: ThyFormValidatorConfig) {	×
89	this.validator.setValidatorConfig(config);	×
90	}
91		×
92	@HostBinding('class.was-validated') wasValidated = false;	×
93		×
94	onSubmitSuccess: ($event: any) => void;	×
95
96	private _unsubscribe: () => void;
97
98	@ContentChildren(NgControl, {
99	descendants: true	×
100	})	×
101	public controls: QueryList<NgControl>;
102
103	constructor(	×
104	private ngForm: ControlContainer,	×
105	private elementRef: ElementRef,	×
106	private renderer: Renderer2,
107	private ngZone: NgZone,
108	public validator: ThyFormValidatorService,
109	@Inject(THY_FORM_CONFIG) private config: ThyFormConfig
110	) {
111	this.layout = this.config.layout;
112	}
113		×
114	ngOnInit(): void {	×
115	this.ngZone.runOutsideAngular(() => {	×
116	this._unsubscribe = this.renderer.listen(this.elementRef.nativeElement, 'keydown', this.onKeydown.bind(this));
117	});
118	this.updateClasses();	1✔
119	this.initialized = true;
120	}
121
122	ngAfterViewInit() {
123	this.validator.initialize(this.ngForm as NgForm, this.elementRef.nativeElement);
124	this.validator.initializeFormControlsValidation(this.controls.toArray());
125	this.controls.changes.subscribe(controls => {
126	this.validator.initializeFormControlsValidation(this.controls.toArray());	1✔
127	});
128	}
129
130	submit($event: Event) {
131	if (this.validator.validate($event)) {
132	this.onSubmitSuccess && this.onSubmitSuccess($event);
133	} else {
134	// this.wasValidated = true;
135	}
136	}	1✔
137
138	updateClasses() {
139	this.hostRenderer.updateClassByMap({
140	[`thy-form-${this.thyLayout}`]: true
141	});
142	}
143
144	submitRunInZone($event: any) {
145	this.ngZone.run(() => {
146	this.submit($event);
147	});
148	}
149
150	onKeydown($event: KeyboardEvent) {
151	const currentInput = document.activeElement;
152	const key = $event.which \|\| $event.keyCode;
153	if (key === keycodes.ENTER && currentInput.tagName) {
154	if (!this.thyEnterKeyMode \|\| this.thyEnterKeyMode === ThyEnterKeyMode.submit) {
155	// TEXTAREA或包含[contenteditable]属性的元素 Ctrl + Enter 或者 Command + Enter 阻止默认行为并提交
156	if (currentInput.tagName === 'TEXTAREA' \|\| coerceBooleanProperty(currentInput.getAttribute('contenteditable'))) {
157	if ($event.ctrlKey \|\| $event.metaKey) {
158	$event.preventDefault();
159	this.submitRunInZone($event);
160	}
161	} else {
162	// 不是 TEXTAREA Enter 阻止默认行为并提交
163	$event.preventDefault();
164	this.submitRunInZone($event);
165	}
166	} else if (this.thyEnterKeyMode === ThyEnterKeyMode.alwaysSubmit) {
167	$event.preventDefault();
168	this.submitRunInZone($event);
169	} else {
170	// do nothing
171	}
172	}
173	}
174
175	ngOnDestroy() {
176	if (this._unsubscribe) {
177	this._unsubscribe();
178	this._unsubscribe = null;
179	}
180	}
181	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous