fix(forms): improve ngModel error messages (#10314)
This commit is contained in:
@ -12,6 +12,7 @@ import {BaseException} from '../../facade/exceptions';
|
||||
import {FormArray} from '../../model';
|
||||
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
|
||||
import {ControlContainer} from '../control_container';
|
||||
import {ReactiveErrors} from '../reactive_errors';
|
||||
import {composeAsyncValidators, composeValidators, controlPath} from '../shared';
|
||||
import {AsyncValidatorFn, ValidatorFn} from '../validators';
|
||||
|
||||
@ -101,28 +102,7 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy
|
||||
|
||||
private _checkParentType(): void {
|
||||
if (!(this._parent instanceof FormGroupName) && !(this._parent instanceof FormGroupDirective)) {
|
||||
this._throwParentException();
|
||||
ReactiveErrors.arrayParentException();
|
||||
}
|
||||
}
|
||||
|
||||
private _throwParentException(): void {
|
||||
throw new BaseException(`formArrayName must be used with a parent formGroup directive.
|
||||
You'll want to add a formGroup directive and pass it an existing FormGroup instance
|
||||
(you can create one in your class).
|
||||
|
||||
Example:
|
||||
<div [formGroup]="myGroup">
|
||||
<div formArrayName="cities">
|
||||
<div *ngFor="let city of cityArray.controls; let i=index">
|
||||
<input [formControlName]="i">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
In your class:
|
||||
this.cityArray = new FormArray([new FormControl('SF')]);
|
||||
this.myGroup = new FormGroup({
|
||||
cities: this.cityArray
|
||||
});`);
|
||||
}
|
||||
}
|
||||
|
@ -12,9 +12,11 @@ import {EventEmitter, ObservableWrapper} from '../../facade/async';
|
||||
import {BaseException} from '../../facade/exceptions';
|
||||
import {FormControl} from '../../model';
|
||||
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
|
||||
import {AbstractFormGroupDirective} from '../abstract_form_group_directive';
|
||||
import {ControlContainer} from '../control_container';
|
||||
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '../control_value_accessor';
|
||||
import {NgControl} from '../ng_control';
|
||||
import {ReactiveErrors} from '../reactive_errors';
|
||||
import {composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor} from '../shared';
|
||||
import {AsyncValidatorFn, ValidatorFn} from '../validators';
|
||||
|
||||
@ -153,26 +155,13 @@ export class FormControlName extends NgControl implements OnChanges, OnDestroy {
|
||||
|
||||
private _checkParentType(): void {
|
||||
if (!(this._parent instanceof FormGroupName) &&
|
||||
this._parent instanceof AbstractFormGroupDirective) {
|
||||
ReactiveErrors.ngModelGroupException();
|
||||
} else if (
|
||||
!(this._parent instanceof FormGroupName) &&
|
||||
!(this._parent instanceof FormGroupDirective) &&
|
||||
!(this._parent instanceof FormArrayName)) {
|
||||
this._throwParentException();
|
||||
ReactiveErrors.controlParentException();
|
||||
}
|
||||
}
|
||||
|
||||
private _throwParentException(): void {
|
||||
throw new BaseException(
|
||||
`formControlName must be used with a parent formGroup directive.
|
||||
You'll want to add a formGroup directive and pass it an existing FormGroup instance
|
||||
(you can create one in your class).
|
||||
|
||||
Example:
|
||||
<div [formGroup]="myGroup">
|
||||
<input formControlName="firstName">
|
||||
</div>
|
||||
|
||||
In your class:
|
||||
this.myGroup = new FormGroup({
|
||||
firstName: new FormControl()
|
||||
});`);
|
||||
}
|
||||
}
|
||||
|
@ -17,6 +17,7 @@ import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
|
||||
import {ControlContainer} from '../control_container';
|
||||
import {Form} from '../form_interface';
|
||||
import {NgControl} from '../ng_control';
|
||||
import {ReactiveErrors} from '../reactive_errors';
|
||||
import {composeAsyncValidators, composeValidators, setUpControl, setUpFormContainer} from '../shared';
|
||||
|
||||
import {FormArrayName} from './form_array_name';
|
||||
@ -199,9 +200,7 @@ export class FormGroupDirective extends ControlContainer implements Form,
|
||||
|
||||
private _checkFormPresent() {
|
||||
if (isBlank(this.form)) {
|
||||
throw new BaseException(`formGroup expects a FormGroup instance. Please pass one in.
|
||||
Example: <form [formGroup]="myFormGroup">
|
||||
`);
|
||||
ReactiveErrors.missingFormException();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -12,6 +12,7 @@ import {BaseException} from '../../facade/exceptions';
|
||||
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
|
||||
import {AbstractFormGroupDirective} from '../abstract_form_group_directive';
|
||||
import {ControlContainer} from '../control_container';
|
||||
import {ReactiveErrors} from '../reactive_errors';
|
||||
|
||||
import {FormGroupDirective} from './form_group_directive';
|
||||
|
||||
@ -86,25 +87,7 @@ export class FormGroupName extends AbstractFormGroupDirective implements OnInit,
|
||||
/** @internal */
|
||||
_checkParentType(): void {
|
||||
if (!(this._parent instanceof FormGroupName) && !(this._parent instanceof FormGroupDirective)) {
|
||||
this._throwParentException();
|
||||
ReactiveErrors.groupParentException();
|
||||
}
|
||||
}
|
||||
|
||||
private _throwParentException() {
|
||||
throw new BaseException(`formGroupName must be used with a parent formGroup directive.
|
||||
You'll want to add a formGroup directive and pass it an existing FormGroup instance
|
||||
(you can create one in your class).
|
||||
|
||||
Example:
|
||||
<div [formGroup]="myGroup">
|
||||
<div formGroupName="person">
|
||||
<input formControlName="firstName">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
In your class:
|
||||
this.myGroup = new FormGroup({
|
||||
person: new FormGroup({ firstName: new FormControl() })
|
||||
});`);
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user