@ng-stack/forms
Version:
> provides wrapped Angular's Reactive Forms to write its more strongly typed.
1,278 lines (1,253 loc) • 46.8 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, forwardRef, Directive, HostBinding, Input, Output, HostListener, NgModule } from '@angular/core';
import { UntypedFormBuilder, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormArray, UntypedFormControl, UntypedFormGroup, Validators as Validators$1 } from '@angular/forms';
class FormBuilder extends UntypedFormBuilder {
/**
* Construct a new `FormGroup` instance.
*
* @param controlsConfig A collection of child controls. The key for each child is the name
* under which it is registered.
*
* @param options Configuration options object for the `FormGroup`. The object can
* have two shapes:
*
* 1) `AbstractControlOptions` object (preferred), which consists of:
* - `validators`: A synchronous validator function, or an array of validator functions
* - `asyncValidators`: A single async validator or array of async validator functions
* - `updateOn`: The event upon which the control should be updated (options: 'change' | 'blur' |
* submit')
*
* 2) Legacy configuration object, which consists of:
* - `validator`: A synchronous validator function, or an array of validator functions
* - `asyncValidator`: A single async validator or array of async validator functions
*/
group(controlsConfig, options = null) {
return super.group(controlsConfig, options);
}
/**
* @description
* Construct a new `FormControl` with the given state, validators and options.
*
* @param formState Initializes the control with an initial state value, or
* with an object that contains both a value and a disabled status.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains
* validation functions and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator
* functions.
*
* ### Initialize a control as disabled
*
* The following example returns a control with an initial value in a disabled state.
```ts
import {Component, Inject} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
// ...
@Component({
selector: 'app-disabled-form-control',
template: `
<input [formControl]="control" placeholder="First">
`
})
export class DisabledFormControlComponent {
control: FormControl;
constructor(private fb: FormBuilder) {
this.control = fb.control({value: 'my val', disabled: true});
}
}
```
*/
control(formState = null, validatorOrOpts, asyncValidator) {
return super.control(formState, validatorOrOpts, asyncValidator);
}
/**
* Constructs a new `FormArray` from the given array of configurations,
* validators and options.
*
* @param controlsConfig An array of child controls or control configs. Each
* child control is given an index when it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains
* validation functions and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator
* functions.
*/
array(controlsConfig, validatorOrOpts, asyncValidator) {
return super.array(controlsConfig, validatorOrOpts, asyncValidator);
}
}
FormBuilder.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FormBuilder, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
FormBuilder.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FormBuilder });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: FormBuilder, decorators: [{
type: Injectable
}] });
class InputFileDirective {
constructor(elementRef, renderer) {
this.elementRef = elementRef;
this.renderer = renderer;
this.select = new EventEmitter();
this.onChange = (value) => { };
this.onTouched = () => { };
}
get multiple() {
if (this._multiple !== undefined &&
this._multiple !== false &&
this._multiple !== 'false') {
return '';
}
else {
return undefined;
}
}
set multiple(value) {
this._multiple = value;
}
/**
* Callback function that should be called when
* the control's value changes in the UI.
*/
callOnChange(event) {
this.onTouched();
const files = Array.from(this.elementRef.nativeElement.files);
const formData = new FormData();
let formInputName = this.elementRef.nativeElement.name || 'uploadFile';
if (this.multiple !== undefined &&
this.multiple !== false &&
this.multiple !== 'false') {
formInputName += '[]';
}
files.forEach((file) => formData.append(formInputName, file));
this.onChange(formData);
this.select.next(files);
if (this.preserveValue === undefined ||
this.preserveValue === false ||
this.preserveValue === 'false') {
event.target.value = null;
}
}
/**
* Writes a new value to the element.
* This method will be called by the forms API to write
* to the view when programmatic (model -> view) changes are requested.
*
* See: [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor#members)
*/
writeValue(fileList) {
if (fileList && !(fileList instanceof FileList)) {
throw new TypeError('Value for input[type=file] must be an instance of FileList');
}
this.renderer.setProperty(this.elementRef.nativeElement, 'files', fileList);
}
/**
* Registers a callback function that should be called when
* the control's value changes in the UI.
*
* This is called by the forms API on initialization so it can update
* the form model when values propagate from the view (view -> model).
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* Registers a callback function that should be called when the control receives a change event.
* This is called by the forms API on initialization so it can update the form model on change.
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
}
InputFileDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: InputFileDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
InputFileDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: InputFileDirective, selector: "\n input[type=file][ngModel],\n input[type=file][formControl],\n input[type=file][formControlName]", inputs: { multiple: "multiple", preserveValue: "preserveValue" }, outputs: { select: "select" }, host: { listeners: { "change": "callOnChange($event)" }, properties: { "attr.multiple": "this.multiple", "attr.preserveValue": "this.preserveValue" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputFileDirective),
multi: true,
},
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: InputFileDirective, decorators: [{
type: Directive,
args: [{
selector: `
input[type=file][ngModel],
input[type=file][formControl],
input[type=file][formControlName]`,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => InputFileDirective),
multi: true,
},
],
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { multiple: [{
type: HostBinding,
args: ['attr.multiple']
}, {
type: Input
}], preserveValue: [{
type: HostBinding,
args: ['attr.preserveValue']
}, {
type: Input
}], select: [{
type: Output
}], callOnChange: [{
type: HostListener,
args: ['change', ['$event']]
}] } });
class NgsFormsModule {
}
NgsFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: NgsFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgsFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: NgsFormsModule, declarations: [InputFileDirective], exports: [ReactiveFormsModule, InputFileDirective] });
NgsFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: NgsFormsModule, providers: [FormBuilder], imports: [ReactiveFormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: NgsFormsModule, decorators: [{
type: NgModule,
args: [{
declarations: [InputFileDirective],
exports: [ReactiveFormsModule, InputFileDirective],
providers: [FormBuilder],
}]
}] });
class FormArray extends UntypedFormArray {
/**
* Creates a new `FormArray` instance.
*
* @param controls An array of child controls. Each child control is given an index
* where it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
constructor(controls, validatorOrOpts, asyncValidator) {
super(controls, validatorOrOpts, asyncValidator);
this.controls = controls;
}
/**
* Get the Control at the given `index` in the array.
*
* @param index Index in the array to retrieve the control
*/
at(index) {
return super.at(index);
}
/**
* Insert a new Control at the end of the array.
*
* @param control Form control to be inserted
*/
push(control) {
return super.push(control);
}
/**
* Insert a new Control at the given `index` in the array.
*
* @param index Index in the array to insert the control
* @param control Form control to be inserted
*/
insert(index, control) {
return super.insert(index, control);
}
/**
* Replace an existing control.
*
* @param index Index in the array to replace the control
* @param control The Control control to replace the existing control
*/
setControl(index, control) {
return super.setControl(index, control);
}
/**
* Sets the value of the `FormArray`. It accepts an array that matches
* the structure of the control.
*
* This method performs strict checks, and throws an error if you try
* to set the value of a control that doesn't exist or if you exclude the
* value of a control.
*
* ### Set the values for the controls in the form array
*
```ts
const arr = new FormArray([
new FormControl(),
new FormControl()
]);
console.log(arr.value); // [null, null]
arr.setValue(['Nancy', 'Drew']);
console.log(arr.value); // ['Nancy', 'Drew']
```
*
* @param value Array of values for the controls
* @param options Configure options that determine how the control propagates changes and
* emits events after the value changes
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default
* is false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* The configuration options are passed to the
* [updateValueAndValidity](https://angular.io/api/forms/AbstractControl#updateValueAndValidity) method.
*/
setValue(value, options = {}) {
return super.setValue(value, options);
}
/**
* Patches the value of the `FormArray`. It accepts an array that matches the
* structure of the control, and does its best to match the values to the correct
* controls in the group.
*
* It accepts both super-sets and sub-sets of the array without throwing an error.
*
* ### Patch the values for controls in a form array
*
```ts
const arr = new FormArray([
new FormControl(),
new FormControl()
]);
console.log(arr.value); // [null, null]
arr.patchValue(['Nancy']);
console.log(arr.value); // ['Nancy', null]
```
*
* @param value Array of latest values for the controls
* @param options Configure options that determine how the control propagates changes and
* emits events after the value changes
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default
* is false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* The configuration options are passed to the
* [updateValueAndValidity](https://angular.io/api/forms/AbstractControl#updateValueAndValidity) method.
*/
patchValue(value, options = {}) {
return super.patchValue(value, options);
}
/**
* Resets the `FormArray` and all descendants are marked `pristine` and `untouched`, and the
* value of all descendants to null or null maps.
*
* You reset to a specific form state by passing in an array of states
* that matches the structure of the control. The state is a standalone value
* or a form state object with both a value and a disabled status.
*
* ### Reset the values in a form array
*
```ts
const arr = new FormArray([
new FormControl(),
new FormControl()
]);
arr.reset(['name', 'last name']);
console.log(this.arr.value); // ['name', 'last name']
```
*
* ### Reset the values in a form array and the disabled status for the first control
*
```
this.arr.reset([
{value: 'name', disabled: true},
'last'
]);
console.log(this.arr.value); // ['name', 'last name']
console.log(this.arr.get(0).status); // 'DISABLED'
```
*
* @param value Array of values for the controls
* @param options Configure options that determine how the control propagates changes and
* emits events after the value changes
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default
* is false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is reset.
* When false, no events are emitted.
* The configuration options are passed to the
* [updateValueAndValidity](https://angular.io/api/forms/AbstractControl#updateValueAndValidity) method.
*/
reset(value = [], options = {}) {
return super.reset(value, options);
}
/**
* The aggregate value of the array, including any disabled controls.
*
* Reports all values regardless of disabled status.
* For enabled controls only, the `value` property is the best way to get the value of the array.
*/
getRawValue() {
return super.getRawValue();
}
/**
* Sets the synchronous validators that are active on this control. Calling
* this overwrites any existing sync validators.
*/
setValidators(newValidator) {
return super.setValidators(newValidator);
}
/**
* Sets the async validators that are active on this control. Calling this
* overwrites any existing async validators.
*/
setAsyncValidators(newValidator) {
return super.setAsyncValidators(newValidator);
}
/**
* Sets errors on a form control when running validations manually, rather than automatically.
*
* Calling `setErrors` also updates the validity of the parent control.
*
* ### Manually set the errors for a control
*
* ```ts
* const login = new FormControl('someLogin');
* login.setErrors({
* notUnique: true
* });
*
* expect(login.valid).toEqual(false);
* expect(login.errors).toEqual({ notUnique: true });
*
* login.setValue('someOtherLogin');
*
* expect(login.valid).toEqual(true);
* ```
*/
setErrors(errors, opts = {}) {
return super.setErrors(errors, opts);
}
/**
* Reports error data for the control with the given controlName.
*
* @param errorCode The code of the error to check
* @param controlName A control name that designates how to move from the current control
* to the control that should be queried for errors.
*
* For example, for the following `FormGroup`:
*
```ts
form = new FormGroup({
address: new FormGroup({ street: new FormControl() })
});
```
*
* The controlName to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in combination with `get()` method:
*
```ts
form.get('address').getError('someErrorCode', 'street');
```
*
* @returns error data for that particular error. If the control or error is not present,
* null is returned.
*/
getError(errorCode, controlName) {
return super.getError(errorCode, controlName);
}
/**
* Reports whether the control with the given controlName has the error specified.
*
* @param errorCode The code of the error to check
* @param controlName A control name that designates how to move from the current control
* to the control that should be queried for errors.
*
* For example, for the following `FormGroup`:
*
```ts
form = new FormGroup({
address: new FormGroup({ street: new FormControl() })
});
```
*
* The controlName to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in combination with `get()` method:
```ts
form.get('address').hasError('someErrorCode', 'street');
```
*
* If no controlName is given, this method checks for the error on the current control.
*
* @returns whether the given error is present in the control at the given controlName.
*
* If the control is not present, false is returned.
*/
hasError(errorCode, controlName) {
return super.hasError(errorCode, controlName);
}
}
class FormControl extends UntypedFormControl {
/**
* Creates a new `FormControl` instance.
*
* @param formState Initializes the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
*/
constructor(formState = null, validatorOrOpts, asyncValidator) {
super(formState, validatorOrOpts, asyncValidator);
}
/**
* Sets a new value for the form control.
*
* @param value The new value for the control.
* @param options Configuration options that determine how the control proopagates changes
* and emits events when the value changes.
* The configuration options are passed to the
* [updateValueAndValidity](https://angular.io/api/forms/AbstractControl#updateValueAndValidity) method.
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* * `emitModelToViewChange`: When true or not supplied (the default), each change triggers an
* `onChange` event to
* update the view.
* * `emitViewToModelChange`: When true or not supplied (the default), each change triggers an
* `ngModelChange`
* event to update the model.
*
*/
setValue(value, options = {}) {
return super.setValue(value, options);
}
/**
* Patches the value of a control.
*
* This function is functionally the same as [setValue](https://angular.io/api/forms/FormControl#setValue) at this level.
* It exists for symmetry with [patchValue](https://angular.io/api/forms/FormGroup#patchValue) on `FormGroups` and
* `FormArrays`, where it does behave differently.
*
* See also: `setValue` for options
*/
patchValue(value, options = {}) {
return super.patchValue(value, options);
}
/**
* Resets the form control, marking it `pristine` and `untouched`, and setting
* the value to null.
*
* @param formState Resets the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param options Configuration options that determine how the control propagates changes
* and emits events after the value changes.
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is reset.
* When false, no events are emitted.
*
*/
reset(formState = null, options = {}) {
return super.reset(formState, options);
}
/**
* In `FormControl`, this method always returns `null`.
*/
get() {
return null;
}
/**
* Sets the synchronous validators that are active on this control. Calling
* this overwrites any existing sync validators.
*/
setValidators(newValidator) {
return super.setValidators(newValidator);
}
/**
* Sets the async validators that are active on this control. Calling this
* overwrites any existing async validators.
*/
setAsyncValidators(newValidator) {
return super.setAsyncValidators(newValidator);
}
/**
* Sets errors on a form control when running validations manually, rather than automatically.
*
* Calling `setErrors` also updates the validity of the parent control.
*
* ### Manually set the errors for a control
*
* ```ts
* const login = new FormControl('someLogin');
* login.setErrors({
* notUnique: true
* });
*
* expect(login.valid).toEqual(false);
* expect(login.errors).toEqual({ notUnique: true });
*
* login.setValue('someOtherLogin');
*
* expect(login.valid).toEqual(true);
* ```
*/
setErrors(errors, opts = {}) {
return super.setErrors(errors, opts);
}
/**
* Reports error data for the current control.
*
* @param errorCode The code of the error to check.
*
* @returns error data for that particular error. If an error is not present,
* null is returned.
*/
getError(errorCode) {
return super.getError(errorCode);
}
/**
* Reports whether the current control has the error specified.
*
* @param errorCode The code of the error to check.
*
* @returns whether the given error is present in the current control.
*
* If an error is not present, false is returned.
*/
hasError(errorCode) {
return super.hasError(errorCode);
}
}
class FormGroup extends UntypedFormGroup {
/**
* Creates a new `FormGroup` instance.
*
* @param controls A collection of child controls. The key for each child is the name
* under which it is registered.
*
* @param validatorOrOpts A synchronous validator function, or an array of
* such functions, or an `AbstractControlOptions` object that contains validation functions
* and a validation trigger.
*
* @param asyncValidator A single async validator or array of async validator functions
*
* @todo Chechout how to respect optional and require properties modifyers for the controls.
*/
constructor(controls, validatorOrOpts, asyncValidator) {
super(controls, validatorOrOpts, asyncValidator);
this.controls = controls;
}
/**
* Registers a control with the group's list of controls.
*
* This method does not update the value or validity of the control.
* Use [addControl](https://angular.io/api/forms/FormGroup#addControl) instead.
*
* @param name The control name to register in the collection
* @param control Provides the control for the given name
*/
registerControl(name, control) {
return super.registerControl(name, control);
}
/**
* Add a control to this group.
*
* This method also updates the value and validity of the control.
*
* @param name The control name to add to the collection
* @param control Provides the control for the given name
*/
addControl(name, control) {
return super.addControl(name, control);
}
/**
* Remove a control from this group.
*
* @param name The control name to remove from the collection
*/
removeControl(name) {
return super.removeControl(name);
}
/**
* Replace an existing control.
*
* @param name The control name to replace in the collection
* @param control Provides the control for the given name
*/
setControl(name, control) {
return super.setControl(name, control);
}
/**
* Check whether there is an enabled control with the given name in the group.
*
* Reports false for disabled controls. If you'd like to check for existence in the group
* only, use [get](https://angular.io/api/forms/AbstractControl#get) instead.
*
* @param name The control name to check for existence in the collection
*
* @returns false for disabled controls, true otherwise.
*/
contains(name) {
return super.contains(name);
}
/**
* Sets the value of the `FormGroup`. It accepts an object that matches
* the structure of the group, with control names as keys.
*
* ### Set the complete value for the form group
*
```ts
const form = new FormGroup({
first: new FormControl(),
last: new FormControl()
});
console.log(form.value); // {first: null, last: null}
form.setValue({first: 'Nancy', last: 'Drew'});
console.log(form.value); // {first: 'Nancy', last: 'Drew'}
```
*
* @throws When strict checks fail, such as setting the value of a control
* that doesn't exist or if you excluding the value of a control.
*
* @param value The new value for the control that matches the structure of the group.
* @param options Configuration options that determine how the control propagates changes
* and emits events after the value changes.
* The configuration options are passed to the
* [updateValueAndValidity](https://angular.io/api/forms/AbstractControl#updateValueAndValidity) method.
*
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
*/
setValue(value, options = {}) {
return super.setValue(value, options);
}
/**
* Patches the value of the `FormGroup`. It accepts an object with control
* names as keys, and does its best to match the values to the correct controls
* in the group.
*
* It accepts both super-sets and sub-sets of the group without throwing an error.
*
* ### Patch the value for a form group
*
```ts
const form = new FormGroup({
first: new FormControl(),
last: new FormControl()
});
console.log(form.value); // {first: null, last: null}
form.patchValue({first: 'Nancy'});
console.log(form.value); // {first: 'Nancy', last: null}
```
*
* @param value The object that matches the structure of the group.
* @param options Configuration options that determine how the control propagates changes and
* emits events after the value is patched.
* * `onlySelf`: When true, each change only affects this control and not its parent. Default is
* true.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control value is updated.
* When false, no events are emitted.
* The configuration options are passed to the
* [updateValueAndValidity](https://angular.io/api/forms/AbstractControl#updateValueAndValidity) method.
*/
patchValue(value, options = {}) {
return super.patchValue(value, options);
}
/**
* Resets the `FormGroup`, marks all descendants are marked `pristine` and `untouched`, and
* the value of all descendants to null.
*
* You reset to a specific form state by passing in a map of states
* that matches the structure of your form, with control names as keys. The state
* is a standalone value or a form state object with both a value and a disabled
* status.
*
* @param formState Resets the control with an initial value,
* or an object that defines the initial value and disabled state.
*
* @param options Configuration options that determine how the control propagates changes
* and emits events when the group is reset.
* * `onlySelf`: When true, each change only affects this control, and not its parent. Default is
* false.
* * `emitEvent`: When true or not supplied (the default), both the `statusChanges` and
* `valueChanges`
* observables emit events with the latest status and value when the control is reset.
* When false, no events are emitted.
* The configuration options are passed to the
* [updateValueAndValidity](https://angular.io/api/forms/AbstractControl#updateValueAndValidity) method.
*
*
* ### Reset the form group values
*
```ts
const form = new FormGroup({
first: new FormControl('first name'),
last: new FormControl('last name')
});
console.log(form.value); // {first: 'first name', last: 'last name'}
form.reset({ first: 'name', last: 'last name' });
console.log(form.value); // {first: 'name', last: 'last name'}
```
*
* ### Reset the form group values and disabled status
*
```ts
const form = new FormGroup({
first: new FormControl('first name'),
last: new FormControl('last name')
});
form.reset({
first: {value: 'name', disabled: true},
last: 'last'
});
console.log(this.form.value); // {first: 'name', last: 'last name'}
console.log(this.form.get('first').status); // 'DISABLED'
```
*/
reset(value = {}, options = {}) {
return super.reset(value, options);
}
/**
* The aggregate value of the `FormGroup`, including any disabled controls.
*
* Retrieves all values regardless of disabled status.
* The `value` property is the best way to get the value of the group, because
* it excludes disabled controls in the `FormGroup`.
*/
getRawValue() {
return super.getRawValue();
}
/**
* Retrieves a child control given the control's name.
*
* ### Retrieve a nested control
*
* For example, to get a `name` control nested within a `person` sub-group:
```ts
this.form.get('person').get('name');
```
*/
get(controlName) {
return super.get(controlName);
}
/**
* Sets the synchronous validators that are active on this control. Calling
* this overwrites any existing sync validators.
*/
setValidators(newValidator) {
return super.setValidators(newValidator);
}
/**
* Sets the async validators that are active on this control. Calling this
* overwrites any existing async validators.
*/
setAsyncValidators(newValidator) {
return super.setAsyncValidators(newValidator);
}
/**
* Sets errors on a form control when running validations manually, rather than automatically.
*
* Calling `setErrors` also updates the validity of the parent control.
*
* ### Manually set the errors for a control
*
* ```ts
* const login = new FormControl('someLogin');
* login.setErrors({
* notUnique: true
* });
*
* expect(login.valid).toEqual(false);
* expect(login.errors).toEqual({ notUnique: true });
*
* login.setValue('someOtherLogin');
*
* expect(login.valid).toEqual(true);
* ```
*/
setErrors(errors, opts = {}) {
return super.setErrors(errors, opts);
}
/**
* Reports error data for the control with the given controlName.
*
* @param errorCode The code of the error to check
* @param controlName A control name that designates how to move from the current control
* to the control that should be queried for errors.
*
* For example, for the following `FormGroup`:
*
```ts
form = new FormGroup({
address: new FormGroup({ street: new FormControl() })
});
```
*
* The controlName to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in combination with `get()` method:
*
```ts
form.get('address').getError('someErrorCode', 'street');
```
*
* @returns error data for that particular error. If the control or error is not present,
* null is returned.
*/
getError(errorCode, controlName) {
return super.getError(errorCode, controlName);
}
/**
* Reports whether the control with the given controlName has the error specified.
*
* @param errorCode The code of the error to check
* @param controlName A control name that designates how to move from the current control
* to the control that should be queried for errors.
*
* For example, for the following `FormGroup`:
*
```ts
form = new FormGroup({
address: new FormGroup({ street: new FormControl() })
});
```
*
* The controlName to the 'street' control from the root form would be 'address' -> 'street'.
*
* It can be provided to this method in combination with `get()` method:
```ts
form.get('address').hasError('someErrorCode', 'street');
```
*
* If no controlName is given, this method checks for the error on the current control.
*
* @returns whether the given error is present in the control at the given controlName.
*
* If the control is not present, false is returned.
*/
hasError(errorCode, controlName) {
return super.hasError(errorCode, controlName);
}
}
// Next flag used because of this https://github.com/ng-packagr/ng-packagr/issues/696#issuecomment-373487183
// @dynamic
/**
* Provides a set of built-in validators that can be used by form controls.
*
* A validator is a function that processes a `FormControl` or collection of
* controls and returns an error map or null. A null map means that validation has passed.
*
* See also [Form Validation](https://angular.io/guide/form-validation).
*/
class Validators extends Validators$1 {
/**
* Validator that requires the control's value to be greater than or equal to the provided number.
* The validator exists only as a function and not as a directive.
*
* ### Validate against a minimum of 3
*
* ```ts
* const control = new FormControl(2, Validators.min(3));
*
* console.log(control.errors); // {min: {min: 3, actual: 2}}
* ```
*
* @returns A validator function that returns an error map with the
* `min` property if the validation check fails, otherwise `null`.
*
*/
static min(min) {
return super.min(min);
}
/**
* Validator that requires the control's value to be less than or equal to the provided number.
* The validator exists only as a function and not as a directive.
*
* ### Validate against a maximum of 15
*
* ```ts
* const control = new FormControl(16, Validators.max(15));
*
* console.log(control.errors); // {max: {max: 15, actual: 16}}
* ```
*
* @returns A validator function that returns an error map with the
* `max` property if the validation check fails, otherwise `null`.
*
*/
static max(max) {
return super.max(max);
}
/**
* Validator that requires the control have a non-empty value.
*
* ### Validate that the field is non-empty
*
* ```ts
* const control = new FormControl('', Validators.required);
*
* console.log(control.errors); // {required: true}
* ```
*
* @returns An error map with the `required` property
* if the validation check fails, otherwise `null`.
*
*/
static required(control) {
return super.required(control);
}
/**
* Validator that requires the control's value be true. This validator is commonly
* used for required checkboxes.
*
* ### Validate that the field value is true
*
* ```typescript
* const control = new FormControl('', Validators.requiredTrue);
*
* console.log(control.errors); // {required: true}
* ```
*
* @returns An error map that contains the `required` property
* set to `true` if the validation check fails, otherwise `null`.
*/
static requiredTrue(control) {
return super.requiredTrue(control);
}
/**
* Validator that requires the control's value pass an email validation test.
*
* ### Validate that the field matches a valid email pattern
*
* ```typescript
* const control = new FormControl('bad@', Validators.email);
*
* console.log(control.errors); // {email: true}
* ```
*
* @returns An error map with the `email` property
* if the validation check fails, otherwise `null`.
*
*/
static email(control) {
return super.email(control);
}
/**
* Validator that requires the length of the control's value to be greater than or equal
* to the provided minimum length. This validator is also provided by default if you use the
* the HTML5 `minlength` attribute.
*
* ### Validate that the field has a minimum of 3 characters
*
* ```typescript
* const control = new FormControl('ng', Validators.minLength(3));
*
* console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
* ```
*
* ```html
* <input minlength="5">
* ```
*
* @returns A validator function that returns an error map with the
* `minlength` if the validation check fails, otherwise `null`.
*/
static minLength(minLength) {
return super.minLength(minLength);
}
/**
* Validator that requires the length of the control's value to be less than or equal
* to the provided maximum length. This validator is also provided by default if you use the
* the HTML5 `maxlength` attribute.
*
* ### Validate that the field has maximum of 5 characters
*
* ```typescript
* const control = new FormControl('Angular', Validators.maxLength(5));
*
* console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
* ```
*
* ```html
* <input maxlength="5">
* ```
*
* @returns A validator function that returns an error map with the
* `maxlength` property if the validation check fails, otherwise `null`.
*/
static maxLength(maxLength) {
return super.maxLength(maxLength);
}
/**
* Validator that requires the control's value to match a regex pattern. This validator is also
* provided by default if you use the HTML5 `pattern` attribute.
*
* Note that if a Regexp is provided, the Regexp is used as is to test the values. On the other
* hand, if a string is passed, the `^` character is prepended and the `$` character is
* appended to the provided string (if not already present), and the resulting regular
* expression is used to test the values.
*
* ### Validate that the field only contains letters or spaces
*
* ```typescript
* const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));
*
* console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}
* ```
*
* ```html
* <input pattern="[a-zA-Z ]*">
* ```
*
* @returns A validator function that returns an error map with the
* `pattern` property if the validation check fails, otherwise `null`.
*/
static pattern(pattern) {
return super.pattern(pattern);
}
/**
* Validator that performs no operation.
*/
static nullValidator(control) {
return null;
}
static compose(validators) {
return super.compose(validators);
}
/**
* Compose multiple async validators into a single function that returns the union
* of the individual error objects for the provided control.
*
* @returns A validator function that returns an error map with the
* merged error objects of the async validators if the validation check fails, otherwise `null`.
*/
static composeAsync(validators) {
return super.composeAsync(validators);
}
/**
* At least one file should be.
*
* **Note**: use this validator when `formControl.value` is an instance of `FormData` only.
*/
static fileRequired(formControl) {
if (!(formControl.value instanceof FormData)) {
return { fileRequired: true };
}
const files = [];
formControl.value.forEach((file) => files.push(file));
for (const file of files) {
if (file instanceof File) {
return null;
}
}
return { fileRequired: true };
}
/**
* Minimal number of files.
*
* **Note**: use this validator when `formControl.value` is an instance of `FormData` only.
*/
static filesMinLength(minLength) {
return (formControl) => {
const value = formControl.value;
if (minLength < 1) {
return null;
}
if (!value || !(value instanceof FormData)) {
return { filesMinLength: { requiredLength: minLength, actualLength: 0 } };
}
const files = [];
value.forEach((file) => files.push(file));
const len = files.length;
if (len < minLength) {
return { filesMinLength: { requiredLength: minLength, actualLength: len } };
}
return null;
};
}
/**
* Maximal number of files.
*
* **Note**: use this validator when `formControl.value` is an instance of `FormData` only.
*/
static filesMaxLength(maxLength) {
return (formControl) => {
if (!(formControl.value instanceof FormData)) {
return null;
}
const files = [];
formControl.value.forEach((file) => files.push(file));
const len = files.length;
if (len > maxLength) {
return { filesMaxLength: { requiredLength: maxLength, actualLength: len } };
}
return null;
};
}
/**
* Maximal size of a file.
*
* **Note**: use this validator when `formControl.value` is an instance of `FormData` only.
*/
static fileMaxSize(maxSize) {
return (formControl) => {
if (!(formControl.value instanceof FormData)) {
return null;
}
const files = [];
formControl.value.forEach((file) => files.push(file));
for (const file of files) {
if (file instanceof File && file.size > maxSize) {
return { fileMaxSize: { requiredSize: maxSize, actualSize: file.size, file } };
}
}
return null;
};
}
}
const sym = Symbol();
/**
* The default validators model, it includes almost all static properties of `Validators`,
* excludes: `prototype`, `compose`, `composeAsync` and `nullValidator`.
*
* ### Usage
*
```ts
const formControl = new FormControl<string, ValidatorsModel>('some value');
// OR
const formGroup = new FormGroup<any, ValidatorsModel>({});
// OR
const formArray = new FormArray<any, ValidatorsModel>([]);
```
*/
class ValidatorsModel {
}
/*
* Public API Surface of forms
*/
/**
* Generated bundle index. Do not edit.
*/
export { FormArray, FormBuilder, FormControl, FormGroup, InputFileDirective, NgsFormsModule, Validators, ValidatorsModel };
//# sourceMappingURL=ng-stack-forms.mjs.map