Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Angular - Abp form field component#23971

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
erdemcaygor wants to merge11 commits intodev
base:dev
Choose a base branch
Loading
fromfeat/#23955
Draft
Show file tree
Hide file tree
Changes from1 commit
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
PrevPrevious commit
NextNext commit
abp form field component added
  • Loading branch information
@erdemcaygor
erdemcaygor committedOct 21, 2025
commite7ba609ea3e55acd96d7b4097ed9e44e96cae6cf

Some comments aren't visible on the classic Files Changed page.

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
selector: 'abp-form-field-error',
template: `<div class="invalid-feedback d-block">
<ng-content></ng-content>
</div>`,
changeDetection: ChangeDetectionStrategy.OnPush
})

export class AbpFormFieldErrorComponent {

}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
import { ChangeDetectionStrategy, Component, input } from '@angular/core';

@Component({
selector: 'abp-form-field-label',
template: `<ng-content></ng-content>`,
changeDetection: ChangeDetectionStrategy.OnPush
})

export class AbpFormFieldLabelComponent {
for= input<string>('');
}
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
<div>
<div class="form-group">
<label class="form-label" [for]="labelComponent()?.for()">
<ng-content select="abp-form-field-label" />
</label>
<ng-content select="abp-input" />
<ng-content select="abp-form-field-hint" />
</div>
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,30 @@
import { Component, ChangeDetectionStrategy, input, HostBinding } from '@angular/core';
import {
Component,
ChangeDetectionStrategy,
input,
HostBinding,
InjectionToken,
QueryList,
ContentChild,
contentChild,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { AbpFormFieldLabelComponent } from './abp-form-field-label.component';

export const ABP_FORM_FIELD = new InjectionToken<AbpFormFieldComponent>('AbpFormFieldComponent');

@Component({
selector: 'abp-form-field',
templateUrl: './abp-form-field.component.html',
imports: [CommonModule],
exportAs: 'abpFormField',
providers: [{ provide: ABP_FORM_FIELD, useExisting: AbpFormFieldComponent }],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AbpFormFieldComponent {

containerClass = input<string>('mb-3');
labelComponent = contentChild(AbpFormFieldLabelComponent);

@HostBinding('class')
get hostClasses(): string {
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
export * from './abp-form-field.component';
export * from './abp-form-field-hint.component';
export * from './abp-form-field-label.component';
3 changes: 0 additions & 3 deletionsnpm/ng-packs/packages/components/abp-input/README.md
View file
Open in desktop

This file was deleted.

View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
<div class="form-group" [formGroup]="abpInputFormGroup">
<label [for]="id()" class="form-label">{{ label() | abpLocalization }}</label>
@if(abpFormField) {
<input
[type]="type()"
[id]="id()"
class="form-control"
[placeholder]="placeholder()"
formControlName="value"
/>
@if (hint()) {
<small class="form-text text-muted">{{ hint() | abpLocalization }}</small>
}
@if (errors.length > 0) {
<div class="invalid-feedback d-block">
@for (error of errors; track error) {
<div>{{ error }}</div>
}
</div>
}
<div></div>
</div>
} @else {
<div class="form-group" [formGroup]="abpInputFormGroup">
@if (label()) {
<label [for]="id()" class="form-label">{{ label() | abpLocalization }}</label>
}
<input
[type]="type()"
[id]="id()"
class="form-control"
[placeholder]="placeholder()"
formControlName="value"
/>
@if (hint()) {
<small class="form-text text-muted">{{ hint() | abpLocalization }}</small>
}
@if (errors.length > 0) {
<div class="invalid-feedback d-block">
@for (error of errors; track error) {
<div>{{ error }}</div>
}
</div>
}
<div></div>
</div>
}
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -23,6 +23,7 @@ import {
} from '@angular/forms';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { LocalizationPipe } from '@abp/ng.core';
import { ABP_FORM_FIELD } from '@abp/ng.components/abp-form-field';

const ABP_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
Expand All@@ -42,7 +43,7 @@ const ABP_INPUT_CONTROL_VALUE_ACCESSOR = {
providers: [ABP_INPUT_CONTROL_VALUE_ACCESSOR],
})
export class AbpInputComponent implements OnInit, ControlValueAccessor {
label = input.required<string>();
label = input<string>();
type = input<'text' | 'number' | 'password'>('text');
id = input<string>('');
placeholder = input<string>('');
Expand All@@ -52,6 +53,7 @@ export class AbpInputComponent implements OnInit, ControlValueAccessor {
readonly changeDetectorRef = inject(ChangeDetectorRef);
readonly destroyRef = inject(DestroyRef);
readonly injector = inject(Injector);
readonly abpFormField = inject(ABP_FORM_FIELD, { optional: true });
abpInputFormGroup: FormGroup;

ngOnInit() {
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp