/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import { AfterViewInit, EventEmitter } from '@angular/core'; import { AbstractControl, FormHooks } from '../model/abstract_model'; import { FormControl } from '../model/form_control'; import { FormGroup } from '../model/form_group'; import { ControlContainer } from './control_container'; import { Form } from './form_interface'; import { NgControl } from './ng_control'; import { NgModel } from './ng_model'; import { NgModelGroup } from './ng_model_group'; import { SetDisabledStateOption } from './shared'; import { AsyncValidator, AsyncValidatorFn, Validator, ValidatorFn } from './validators'; import * as i0 from "@angular/core"; /** * @description * Creates a top-level `FormGroup` instance and binds it to a form * to track aggregate form value and validation status. * * As soon as you import the `FormsModule`, this directive becomes active by default on * all `
` tags. You don't need to add a special selector. * * You optionally export the directive into a local template variable using `ngForm` as the key * (ex: `#myForm="ngForm"`). This is optional, but useful. Many properties from the underlying * `FormGroup` instance are duplicated on the directive itself, so a reference to it * gives you access to the aggregate value and validity status of the form, as well as * user interaction properties like `dirty` and `touched`. * * To register child controls with the form, use `NgModel` with a `name` * attribute. You may use `NgModelGroup` to create sub-groups within the form. * * If necessary, listen to the directive's `ngSubmit` event to be notified when the user has * triggered a form submission. The `ngSubmit` event emits the original form * submission event. * * In template driven forms, all `` tags are automatically tagged as `NgForm`. * To import the `FormsModule` but skip its usage in some forms, * for example, to use native HTML5 validation, add the `ngNoForm` and the `` * tags won't create an `NgForm` directive. In reactive forms, using `ngNoForm` is * unnecessary because the `` tags are inert. In that case, you would * refrain from using the `formGroup` directive. * * @usageNotes * * ### Listening for form submission * * The following example shows how to capture the form values from the "ngSubmit" event. * * {@example forms/ts/simpleForm/simple_form_example.ts region='Component'} * * ### Setting the update options * * The following example shows you how to change the "updateOn" option from its default using * ngFormOptions. * * ```html * * *
* ``` * * ### Native DOM validation UI * * In order to prevent the native DOM form validation UI from interfering with Angular's form * validation, Angular automatically adds the `novalidate` attribute on any `
` whenever * `FormModule` or `ReactiveFormModule` are imported into the application. * If you want to explicitly enable native DOM validation UI with Angular forms, you can add the * `ngNativeValidate` attribute to the `` element: * * ```html * * ... *
* ``` * * @ngModule FormsModule * @publicApi */ export declare class NgForm extends ControlContainer implements Form, AfterViewInit { private callSetDisabledState?; /** * @description * Returns whether the form submission has been triggered. */ readonly submitted: boolean; private _directives; /** * @description * The `FormGroup` instance created for this form. */ form: FormGroup; /** * @description * Event emitter for the "ngSubmit" event */ ngSubmit: EventEmitter; /** * @description * Tracks options for the `NgForm` instance. * * **updateOn**: Sets the default `updateOn` value for all child `NgModels` below it * unless explicitly set by a child `NgModel` using `ngModelOptions`). Defaults to 'change'. * Possible values: `'change'` | `'blur'` | `'submit'`. * */ options: { updateOn?: FormHooks; }; constructor(validators: (Validator | ValidatorFn)[], asyncValidators: (AsyncValidator | AsyncValidatorFn)[], callSetDisabledState?: SetDisabledStateOption | undefined); /** @nodoc */ ngAfterViewInit(): void; /** * @description * The directive instance. */ get formDirective(): Form; /** * @description * The internal `FormGroup` instance. */ get control(): FormGroup; /** * @description * Returns an array representing the path to this group. Because this directive * always lives at the top level of a form, it is always an empty array. */ get path(): string[]; /** * @description * Returns a map of the controls in this group. */ get controls(): { [key: string]: AbstractControl; }; /** * @description * Method that sets up the control directive in this group, re-calculates its value * and validity, and adds the instance to the internal list of directives. * * @param dir The `NgModel` directive instance. */ addControl(dir: NgModel): void; /** * @description * Retrieves the `FormControl` instance from the provided `NgModel` directive. * * @param dir The `NgModel` directive instance. */ getControl(dir: NgModel): FormControl; /** * @description * Removes the `NgModel` instance from the internal list of directives * * @param dir The `NgModel` directive instance. */ removeControl(dir: NgModel): void; /** * @description * Adds a new `NgModelGroup` directive instance to the form. * * @param dir The `NgModelGroup` directive instance. */ addFormGroup(dir: NgModelGroup): void; /** * @description * Removes the `NgModelGroup` directive instance from the form. * * @param dir The `NgModelGroup` directive instance. */ removeFormGroup(dir: NgModelGroup): void; /** * @description * Retrieves the `FormGroup` for a provided `NgModelGroup` directive instance * * @param dir The `NgModelGroup` directive instance. */ getFormGroup(dir: NgModelGroup): FormGroup; /** * Sets the new value for the provided `NgControl` directive. * * @param dir The `NgControl` directive instance. * @param value The new value for the directive's control. */ updateModel(dir: NgControl, value: any): void; /** * @description * Sets the value for this `FormGroup`. * * @param value The new value */ setValue(value: { [key: string]: any; }): void; /** * @description * Method called when the "submit" event is triggered on the form. * Triggers the `ngSubmit` emitter to emit the "submit" event as its payload. * * @param $event The "submit" event object */ onSubmit($event: Event): boolean; /** * @description * Method called when the "reset" event is triggered on the form. */ onReset(): void; /** * @description * Resets the form to an initial value and resets its submitted status. * * @param value The new value for the form. */ resetForm(value?: any): void; private _setUpdateStrategy; private _findContainer; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare const NgForm_Listeners:["submit","reset"]; declare const NgForm_Properties:[];