web-dev-qa-db-ja.com

FormControlインスタンスに直接アクセスできません。未定義のプロパティ「無効」を読み取ることができません

Angular docsと同じ方法でアクセスできないため、最初にFormGroupインスタンスを取得し、そこにFormControlインスタンスを見つける必要があります。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="myForm.controls.username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

これによりエラーがスローされますが（* ngIfステートメントでのみこれらの違い）：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text"
      name="username"
      class="form-control"
      formControlName="username"
    >
    <div *ngIf="username.invalid" class="alert alert-danger">
      username is required
    </div>
  </div>

未定義のプロパティ「無効」を読み取ることができません

form.component：

import {Component} from '@angular/core';
import {FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'sign-up',
  templateUrl: 'app/sign-up.component.html'
})

export class SignUpComponent {

  myForm = new FormGroup({
    username: new FormControl('username', Validators.required),
    password: new FormControl('', Validators.required),
  });
}
angularangular2-formsangular-reactive-forms
12
Julius Dzidzevičius

usernameまたはpasswordという変数がないため、エラーがスローされます。

これを解決するために、次のことができます。

export class SignUpComponent implements OnInit {

  myForm: FormGroup;
  usernameCtrl: FormControl;
  passwordCtrl: FormControl;

  ngOnInit() {
    this.usernameCtrl = new FormControl('username', Validators.required);
    this.passwordCtrl = new FormControl('', Validators.required);

    this.myForm = new FormGroup({
      username: this.usernameCtrl,
      password: this.passwordCtrl
    });
  }
}

...または FormBuilder を使用：

export class SignUpComponent implements OnInit {

  myForm: FormGroup;
  usernameCtrl: FormControl;
  passwordCtrl: FormControl;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.usernameCtrl = this.formBuilder.control('username', Validators.required);
    this.passwordCtrl = this.formBuilder.control('', Validators.required);

    this.myForm = this.formBuilder.group({
      username: this.usernameCtrl,
      password: this.passwordCtrl
    });
  }
}

これで、次のようにテンプレートで直接使用できます。

<div class="alert alert-danger" *ngIf="usernameCtrl.invalid">
  username is required
</div>

また、formControlNameの代わりに[formControl]を使用することもできます：

<input 
  type="text"
  name="username"
  class="form-control"
  [formControl]="usernameCtrl">

[〜＃〜] plunker [〜＃〜]

19
developer033

この問題は、フォームグループを使用して、コントローラーで対応するゲッターを定義することで解決できます。この目標を達成するには：

コントローラ内：

1）フォーム制御変数の定義と初期化を削除します

usernameCtrl: FormControl;
passwordCtrl: FormControl;
...
this.usernameCtrl = this.formBuilder.control('username',Validators.required);
this.passwordCtrl = this.formBuilder.control('', Validators.required);

2）フォームグループの初期化をこれに変更する

ngOnInit() {
this.myForm = this.formBuilder.group({
  username: ['usename', Validators.required]
  password: ['', Validators.required]
});

}

3）ゲッターを追加する

get username() { return this.myForm.get('username'); }
get password() { return this.myForm.get('password'); }

テンプレート内：

1）[formGroup] = "MyForm"で親divを追加します

<div [formGroup]="myForm">
...
</div>

2）forcontrolName = usernameの[formControl] = "usernameCtrl"および* ngIf = "username.invalid"の* ngIf = "usernameCtrl.invalid"を変更します

<input type="text"
       name="username"
       class="form-control"
       formControlName="username">
  <div *ngIf="username.invalid" class="alert alert-danger"> 
    username is required
  </div>

3）forcontrolName = passwordの[formControl] = "passwordCtrl"および* ngIf = "password.invalid"の* ngIf = "passwordCtrl.invalid"を変更します。

<input type="text"
       name="password"
       class="form-control"
       formControlName="password">
  <div *ngIf="password.invalid" class="alert alert-danger">
    password is required
  </div>

Plunker

11
Javier Rojano

私の作品：

form.component：

getFormControl(name) {
    return this.Form.get(name);
}

テンプレート：

<input 
  type="text"
  name="username"
  class="form-control"
  formControlName="username"
>
<div *ngIf="getFormControl('username').invalid" class="alert alert-danger">
  username is required
</div>
4
Alexey Volynshchikov