formGroupNameによって直接コントロールにアクセスする方法

Question

このフォームでは、フォームのエラーを表示するために、formControlName = "last"のコントロールにアクセスする必要があります。

<div [formGroup]="form">
        <div formGroupName="name">
                <input formControlName="first" placeholder="First name">
                <input formControlName="last" placeholder="Last name">
                <span *ngIf="name['controls'].last.invalid">invalid</span>
        </div>
        <input formControlName="email" placeholder="Email">
        <button type="submit">Submit</button>
</div>

このコードは、定義されていないエラー「controls」（太字のフォーマット済みライン）を送出しました。コントロールはフォーム['controls']によってアクセス可能です。名前['controls']。last.invalidですが、フォームグループによってコントロールに直接アクセスできる方法はありますか？事前に

おかげで

Answer 1

この

<div *ngIf="!form.controls.name.controls.last.valid"> 
     Invalid last name !! 
    </div> 

Answer 2

あなたは以下試す

<span *ngIf="form.get('last').invalid">invalid</span>

Answer 3

@sravanponugotiスニペットでし試してみてください。私たちは、角度にして、[formGroup]を使用することはできません。 このコード

<form [formGroup]="form"> 
<div formGroupName="name"> 
<input formControlName="first" placeholder="First"> 
<input formControlName="last" placeholder="Last"> 
<span *ngIf="form.controls['name'].controls.last.valid">invalid</s‌​pan> 
</div> 
<input formControlName="email" placeholder="Email"> 
<button type="submit">Submit</button> 
</form>