角4フォーム検証、送信ボタンが機能しない

Question

このチュートリアルの後に：https://github.com/designcourse/reactive-forms-tutorialと角度で検証するフォームを実装しようとしています。

「送信」ボタン以外はすべて機能します。

「送信」をクリックすると、何もしません。 "firstName"、 "lastname"、 "description"に入力されたものを画面に出力するはずです。現状ではコンソールやコンパイラでは何のエラーもなく文字通り何もしません。

資格-validation.component.tsファイル：

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

@Component({ 
    selector: 'app-eligibility-validation', 
    templateUrl: './eligibility-validation.component.html', 
    styleUrls: ['./eligibility-validation.component.css'] 
}) 
export class EligibilityValidationComponent { 

    rForm: FormGroup; 
    post:any; 
    description:string = ''; 
    firstName:string = ''; 
    lastName:string = ''; 
    titleAlert:string = 'This field is required'; 

    constructor(private fb: FormBuilder) { 

    this.rForm = fb.group({ 
     'firstName': [null, Validators.required], 
     'lastName': [null, Validators.required], 
     'description': [null, Validators.compose([Validators.required, Validators.minLength(30), Validators.maxLength(500)])], 
     'validate' : '' 
    }); 

    } 

    ngOnInit() { 

    this.rForm.get('validate').valueChanges.subscribe(
     (validate) => { 
     if (validate == '1') { 
      this.rForm.get('firstName').setValidators([Validators.required, Validators.minLength(3)]); 
      this.titleAlert = "You need to specify at least 3 characters"; 
     } else { 
      this.rForm.get('firstName').setValidators(Validators.required); 
     } 
     this.rForm.get('firstName').updateValueAndValidity(); 
     } 
    ) 
    } 

    addPost(post) { 
    this.firstName = post.firstName; 
    this.lastName = post.lastName; 
    this.description = post.description; 
    } 

} 

資格-validation.component.htmlファイル：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <!-- Form from tutorial https://github.com/designcourse/reactive-forms-tutorial --> 
      <div *ngIf="!name; else forminfo"> 
       <form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)"> 
        <h4>Instructions</h4> 

        <p>Complete the following form to validate eligibility. Once received we will contact you to confirm the next steps.</p><br> 

        <label>First Name <input type="text" formControlName="firstName"></label><br> 

        <div class="alert" *ngIf="!rForm.controls['firstName'].valid && rForm.controls['firstName'].touched">{{ titleAlert }}</div><br> 

        <label>Last Name <input type="text" formControlName="lastName"></label><br> 

        <div class="alert" *ngIf="!rForm.controls['lastName'].valid && rForm.controls['lastName'].touched">{{ titleAlert }}</div><br> 

        <label>Description <textarea formControlName="description"></textarea></label><br> 

        <div class="alert alert-warning" *ngIf="!rForm.controls['description'].valid && rForm.controls['description'].touched">You must specify a description that's between 30 and 500 characters.</div><br> 

        <label for="validate">Minimum of 3 Characters</label> 

        <input type="checkbox" name="validate" formControlName="validate" value="1"> On <br> 

        <input type="submit" class="button expanded" value="Submit Form" [disabled]="!rForm.valid"> 
       </form> 
      </div> 
      <ng-template #forminfo> 
       <div class="form-container"> 
        <div class="row columns"> 
         <h1>{{ firstName }}</h1> 
         <h1>{{ lastName }}</h1> 
         <p>{{ description }}</p> 
        </div> 
       </div> 
      </ng-template> 
      <!-- End Form --> 
     </div> 
    </div> 
</div> 

コンソールログとコンパイラはエラーメッセージを持っていません。

Answer 1

@JBNizetはコメント内で正しく表示されました。*ngIf="!nameで使用されている式!nameがfalseの場合にのみ情報を表示するdivが表示されます。あなたのコンポーネントにはnameという属性はありません。したがって、常にそれが定義されているので、!nameは常にtrueです。

Answer 2

コードの下をコンストラクタからngInitに移動してみてください。

通常、コンストラクタはクラスレベルですが、角度ブートストラップサイクルではありません。それは設定されていない問題かもしれません。

this.rForm = fb.group({ 
    'firstName': [null, Validators.required], 
    'lastName': [null, Validators.required], 
    'description': [null, Validators.compose([Validators.required, Validators.minLength(30), Validators.maxLength(500)])], 
    'validate' : '' 
});