* `op-form-field` was used both as a BEM block as well as a component. This commit removes usages of `op-form-field` in both instances. * It changes all usages of `opFormBinding` to `spotFormBinding`. * It removes all old files related to `op-form-field`.pull/11330/head
Benjamin Bädorf
3 years ago
parent
c5313bee41
commit
c1d0e02629
@ -1,24 +0,0 @@ |
||||
import { Directive, forwardRef, Input } from '@angular/core'; |
||||
import { |
||||
FormArray, FormControl, FormGroup, NgControl, |
||||
} from '@angular/forms'; |
||||
|
||||
export const formControlBinding:any = { |
||||
provide: NgControl, |
||||
useExisting: forwardRef(() => OpFormBindingDirective), |
||||
}; |
||||
|
||||
@Directive({ |
||||
selector: '[opFormBinding]', |
||||
providers: [formControlBinding], |
||||
exportAs: 'ngForm', |
||||
}) |
||||
export class OpFormBindingDirective extends NgControl { |
||||
@Input('opFormBinding') form!:FormControl|FormGroup|FormArray; |
||||
|
||||
get control():FormControl|FormGroup|FormArray { |
||||
return this.form; |
||||
} |
||||
|
||||
viewToModelUpdate():void {} |
||||
} |
||||
@ -1,7 +0,0 @@ |
||||
.op-form-field_invalid |
||||
.ng-select-container, |
||||
.op-input, |
||||
.op-option-list--item, |
||||
.document-editor__editable-container, |
||||
.ck.ck-toolbar |
||||
border-color: var(--content-form-error-color) |
||||
@ -1,56 +0,0 @@ |
||||
<ng-container *ngIf="!hidden"> |
||||
<label class="op-form-field--label-wrap"> |
||||
<div class="op-form-field--label"> |
||||
<span |
||||
*ngIf="showErrorMessage" |
||||
class="hidden-for-sighted" |
||||
> |
||||
{{ text.invalid }} |
||||
</span> |
||||
{{ label }} |
||||
|
||||
<span *ngIf="required" class="op-form-field--label-indicator">*</span> |
||||
|
||||
<attribute-help-text |
||||
[attribute]="helpTextAttribute" |
||||
[attributeScope]="helpTextAttributeScope" |
||||
></attribute-help-text> |
||||
</div> |
||||
|
||||
<ng-container *ngIf="!noWrapLabel"> |
||||
<ng-container *ngTemplateOutlet="inputTemplate"></ng-container> |
||||
</ng-container> |
||||
</label> |
||||
|
||||
<ng-container *ngIf="noWrapLabel"> |
||||
<ng-container *ngTemplateOutlet="inputTemplate"></ng-container> |
||||
</ng-container> |
||||
|
||||
<div class="op-form-field--help-text"> |
||||
<ng-content select="[slot=help-text]"></ng-content> |
||||
</div> |
||||
|
||||
<div |
||||
class="op-form-field--errors" |
||||
*ngIf="showErrorMessage" |
||||
[id]="errorsID" |
||||
> |
||||
<ng-content select="[slot=errors]"></ng-content> |
||||
</div> |
||||
</ng-container> |
||||
|
||||
<ng-template #inputTemplate> |
||||
<div |
||||
class="op-form-field--description" |
||||
[id]="descriptionID" |
||||
> |
||||
<ng-content select="[slot=description]"></ng-content> |
||||
</div> |
||||
|
||||
<div |
||||
class="op-form-field--input" |
||||
[attr.aria-describedby]="describedByID" |
||||
> |
||||
<ng-content select="[slot=input]"></ng-content> |
||||
</div> |
||||
</ng-template> |
||||
@ -1,78 +0,0 @@ |
||||
import { |
||||
Component, ContentChild, HostBinding, Input, Optional, |
||||
} from '@angular/core'; |
||||
import { AbstractControl, FormGroupDirective, NgControl } from '@angular/forms'; |
||||
import { I18nService } from 'core-app/core/i18n/i18n.service'; |
||||
|
||||
@Component({ |
||||
selector: 'op-form-field', |
||||
templateUrl: './form-field.component.html', |
||||
}) |
||||
export class OpFormFieldComponent { |
||||
@HostBinding('class.op-form-field') className = true; |
||||
|
||||
@HostBinding('class.op-form-field_invalid') get errorClassName() { |
||||
return this.showErrorMessage; |
||||
} |
||||
|
||||
@Input() label = ''; |
||||
|
||||
@Input() noWrapLabel = false; |
||||
|
||||
@Input() required = false; |
||||
|
||||
@Input() hidden = false; |
||||
|
||||
@Input() showValidationErrorOn:'change' | 'blur' | 'submit' | 'never' = 'submit'; |
||||
|
||||
@Input() control?:AbstractControl; |
||||
|
||||
@Input() helpTextAttribute?:string; |
||||
|
||||
@Input() helpTextAttributeScope?:string; |
||||
|
||||
@ContentChild(NgControl) ngControl:NgControl; |
||||
|
||||
internalID = `op-form-field-${+new Date()}`; |
||||
|
||||
text = { |
||||
invalid: this.I18n.t('js.label_invalid'), |
||||
}; |
||||
|
||||
get errorsID() { |
||||
return `${this.internalID}-errors`; |
||||
} |
||||
|
||||
get descriptionID() { |
||||
return `${this.internalID}-description`; |
||||
} |
||||
|
||||
get describedByID() { |
||||
return this.showErrorMessage ? this.errorsID : this.descriptionID; |
||||
} |
||||
|
||||
get formControl():AbstractControl|undefined|null { |
||||
return this.ngControl?.control || this.control; |
||||
} |
||||
|
||||
get showErrorMessage():boolean { |
||||
if (!this.formControl) { |
||||
return false; |
||||
} |
||||
|
||||
if (this.showValidationErrorOn === 'submit') { |
||||
return this.formControl.invalid && this._formGroupDirective?.submitted; |
||||
} if (this.showValidationErrorOn === 'blur') { |
||||
return this.formControl.invalid && this.formControl.touched; |
||||
} if (this.showValidationErrorOn === 'change') { |
||||
return this.formControl.invalid && this.formControl.dirty; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
constructor( |
||||
@Optional() private _formGroupDirective:FormGroupDirective, |
||||
readonly I18n:I18nService, |
||||
) {} |
||||
} |
||||
@ -1,53 +0,0 @@ |
||||
@import 'form-field.children' |
||||
|
||||
.op-form-field |
||||
display: flex |
||||
flex-direction: column |
||||
line-height: 1.6rem |
||||
|
||||
// This is a fix for the formly-forms, which render the wrapper around a non-visible input |
||||
&:empty |
||||
display: none |
||||
|
||||
&--label, |
||||
&--description, |
||||
&--input, |
||||
&--help-text |
||||
margin-bottom: 0.5rem |
||||
|
||||
&--label-wrap |
||||
display: flex |
||||
flex-direction: column |
||||
margin: 0 |
||||
|
||||
&--label |
||||
font-size: 1rem |
||||
font-weight: bold |
||||
|
||||
&-indicator |
||||
color: var(--primary-color) |
||||
|
||||
&_invalid &--label |
||||
color: var(--content-form-error-color) |
||||
|
||||
&--description, |
||||
&--help-text |
||||
font-size: 12px |
||||
|
||||
&--description *:last-child |
||||
margin-bottom: 0 |
||||
|
||||
&--errors |
||||
display: flex |
||||
flex-direction: column |
||||
|
||||
&--error |
||||
color: var(--content-form-error-color) |
||||
margin-bottom: 1rem |
||||
font-size: 0.8rem |
||||
|
||||
&--description, |
||||
&--help-text, |
||||
&--errors |
||||
&:empty |
||||
display: none |
||||
Loading…
Reference in new issue