web-dev-qa-db-ja.com

TypeError：setUpControlで文字列「[email protected]」にプロパティ「validator」を作成できません

formGroupで問題に直面しています。最初にURLに基​​づいて値を取得し、事前フィールドテキストの特定のユーザーデータを取得するためのAPIを呼び出します。

register.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>

register.component.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 : [email protected]
            this.isReadOnly = true;
            this.router.navigateByUrl('/register');
          } else {
            alert("You are Not Autorize to access this Page");
            this.router.navigateByUrl('/login');
          }
        }
    });

  }
}

エラーの詳細：

TypeError: Cannot create property 'validator' on string '[email protected]'
    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)
javascriptangularangular2-routingangular2-templateangular2-forms
16
higunjan
<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>

この変更のように試してください[formControl]からformControlNameへ。

そして、入力フィールドへの出力を設定するには、以下を実行し、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 : [email protected]
            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');
          }
        }
    });
36
sainu

各種類のフォームの詳細については、 https://angular.io/guide/forms-overview Webサイトのリアクティブフォームおよびテンプレート駆動フォームを参照してください。フォームコントロールをグループ化するための実際の構文が欠落しており、テンプレートにコントロールを登録することは両方とも異なる場合に有効です

<input type="text" [formControl]="name">
<input type="text" formControlName="firstName">
2
Vinayak Shedgeri