formularios reactivos angular 6

Formulario dirigido por plantilla Angular 2 acceso a ngForm en el componente

Question

Quiero usar formularios controlados por plantillas en Angular 2 y necesito acceder al ngForm actual en mi directiva, como propiedad local y no quiero pasarlos como parámetro.

mi forma se ve así:

<form #frm="ngForm" (ngSubmit)="save(frm)">
    <input [(ngModel)]="user.name" #name="ngForm" type="text">
    <a (click)="showFrm()" class="btn btn-default">Show Frm</a>
</form>

y en mi componente

@Component({
    selector: ''addUser'',
    templateUrl: `Templates/AddUser`,
})

export class AddUserComponent implements CanDeactivate {
    public user: User;
    // how can I use this without defining the whole form 
    // in my component I only want to use ngModel
    public frm : ngForm | ControlGroup;

    public showFrm()  : void{
        //logs undefined on the console
        console.log(this.frm);
    }
}

¿Es esto posible, porque necesito verificar si se ha activado myFrm ist valide o en una función en la que no puedo pasar la forma actual como parámetro, por ejemplo, "routerCanDeactivate" y no quiero usar las formas dirigidas por modelos demasiado? Para escribir en el código y me encanta la vinculación del modelo ng1 de la vieja escuela.

He actualizado mi ejemplo y la frm no se conoce en el componente.

Answer 1

Necesita el atributo ngControl en las entradas que desea verificar.

<form #frm="ngForm" (ngSubmit)="save(frm)">
   <input [(ngModel)]="user.name" #name="ngForm" ngControl="name"  type="text">
   <a (click)="showFrm()">Show Frm</a>
</form>

y en el componente puede acceder a la variable "frm" con

import {Component, ViewChild} from ''angular2/core'';
...
@ViewChild(''frm'') public userFrm: NgForm;
...
public showFrm(): void{
    console.log(this.frm);
}

No se puede acceder a frm en el constructor, no está allí en este momento, pero en ngAfterViewInit puede acceder a él.

Answer 2

    <h1>Login</h1>
    <hr>
    <div class="col-md-4">
        <form autocomplete="off" #loginForm="ngForm" (ngSubmit)="login(loginForm.value)">
            <div class="form-group">
<em *ngIf="loginForm.controls.userName?.invalid>required</em>
                <label for="userName">User Name:</label>
                <input id="userName" (ngModel)="userName" name="userName" type="text" class="form-control" 
                       placeholder="User Name..." />
            </div>
            <div class="form-group">
<em *ngIf="loginForm.controls.password?.invalid">required</em>
                <label for="password">Password:</label>
                <input id="password" (ngModel)="password" name="password" type="password" class="form-control" placeholder="Password..." />
            </div>

            <button type="submit" [disabled="loginForm.invalid"]class="btn btn-primary">Login</button>
            <button type="button" class="btn btn-default">Cancel</button>
        </form>
    </div>

    ////login component
    import { Component } from ''@angular/core''

    import {AuthService} from ''./auth.service''

    @Component({

        selector: ''login'',
        templateUrl: ''./app/login/login.component.html''
    })

    export class LoginComponent {

        constructor(private authService : AuthService){}

        login(formValues) {
            this.authService.loginUser(formValues.userName, formValues.password)
        }

    }