Enfrento un problema en formGroup . Primero, según la URL, tomo algún valor y llamo a la API para recuperar datos de usuario particulares para el texto del campo previo.
registro.html
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-4 ">Username</label> <div class="col-sm-8"> <input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly"> </div> </div> </form>registro.componente.ts
import { Component } from '@angular/core'; import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; import { EmailValidator, EqualPasswordsValidator } from '../../theme/validators'; @Component({ selector: 'register', templateUrl: './register.html', }) export class Register { public form: FormGroup; public email: AbstractControl; public username: string; constructor(private registerService: RegisterService, fb: FormBuilder, private router: Router, private route: ActivatedRoute) { this.form = fb.group({ 'email': ['', Validators.compose([Validators.required])] .... etc.. }); this.email = this.form.controls['email']; this.registerService.getUser({ userId: "asdasd2123da2das" }).subscribe(posts => { if (posts) { var userObj = posts.json(); console.log("userObj : ", userObj.data); if (userObj.data && userObj.data[0].email) { this.email = this.username = userObj.data[0].email; // ouput : abc@gmail.com this.isReadOnly = true; this.router.navigateByUrl('/register'); } else { alert("You are Not Autorize to access this Page"); this.router.navigateByUrl('/login'); } } }); } }Error de detalles :
TypeError: Cannot create property 'validator' on string 'abc@gmail.com' at setUpControl (http://localhost:3004/vendor.dll.js:9739:23) at FormControlDirective.ngOnChanges (http://localhost:3004/vendor.dll.js:44196:89) at Wrapper_FormControlDirective.ngDoCheck (/ReactiveFormsModule/FormControlDirective/wrapper.ngfactory.js:50:18)<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal"> <div class="form-group row"> <label for="inputEmail3" class="col-sm-4 ">Username</label> <div class="col-sm-8"> <input formControlName="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly"> </div> </div> </form> intente así cambiar [formControl] a formControlName .
Y para establecer la salida en el campo de entrada, haga lo siguiente, señale la línea this.form.patchValue
import { Component } from '@angular/core'; import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; import { EmailValidator, EqualPasswordsValidator } from '../../theme/validators'; @Component({ selector: 'register', templateUrl: './register.html', }) export class Register { public form: FormGroup; public email: AbstractControl; public username: string; constructor(private registerService: RegisterService, fb: FormBuilder, private router: Router, private route: ActivatedRoute) { this.form = fb.group({ 'email': ['', Validators.compose([Validators.required])] .... etc.. }); this.email = this.form.controls['email']; this.registerService.getUser({ userId: "asdasd2123da2das" }).subscribe(posts => { if (posts) { var userObj = posts.json(); console.log("userObj : ", userObj.data); if (userObj.data && userObj.data[0].email) { this.email = this.username = userObj.data[0].email; // ouput : abc@gmail.com this.form.patchValue({ email : this.email }); this.isReadOnly = true; this.router.navigateByUrl('/register'); } else { alert("You are Not Autorize to access this Page"); this.router.navigateByUrl('/login'); } } });Me perdí los corchetes en formGroup en marcado como se muestra a continuación
<form formGroup="form"> </form>y arroja un error similar al
ERROR TypeError: no se puede crear la propiedad 'validador' en la cadena 'formulario'
Una vez que se agregaron los corchetes en formGroup (ver más abajo), el error desaparece
<form [formGroup]="form">....</form>Para obtener información completa sobre cada tipo de formulario, consulte Formularios reactivos y Formularios controlados por plantillas en el sitio web https://angular.io/guide/forms-overview . le falta la sintaxis real para agrupar controles de formulario y registrar el control en la plantilla. Ambos son válidos en diferentes casos
<input type="text" [formControl]="name"> <input type="text" formControlName="firstName">