Angular2/4 - 無法直接訪問FormControl實例。無法讀取未定義的屬性'無效'

Question

無法像在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> 

無法讀取屬性未定義

形式 '無效' .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), 
    }); 
} 

Answer 1

它會引發錯誤，因爲您沒有名爲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> 

此外，如果你喜歡，你可以使用[formControl]代替formControlName：

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

PLUNKER

Answer 2

可以解決使用表單組，並確定在您的控制器對應的干將這個問題。爲了實現這個目標：

在控制器：

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 [formGroup]="myForm"> 
... 
</div> 

2）變化[formControl]父DIV =「usernameCtrl」for forcontrolName =用戶名和* ngIf =「usernameCtrl.invalid」for * ngIf =「用戶名。無效」

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

3）變化[formControl] = 「passwordCtrl」 爲forcontrolName =密碼和* ngIf = 「passwordCtrl.invalid」 爲* ngIf = 「password.invalid」 TE。

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

Plunker