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)
}
}