2017-09-26 11 views
-1

第1の問題点は、 HTTPCLIENTを使用してフォームからapiにデータを投稿しようとしています。私はフォームから値を取得する必要がありますので、私はAPIにそれを投稿することができます混乱しています。私はテンプレート駆動型を使用しています。 2番目の問題は、私はまた、 "パスワードが一致しない"と表示される* ngIfを実装したい場合、パスワードがパスワードを確認することと等しくない場合。しかし私のモーダルでは、「パスワードが一致しません」というフレーズが常に表示されます。ここでは私が以下で試したコードです。テンプレート駆動フォームを角度4で転記する

component.html

<div class="modal-body"> 
      <form class="form-horizontal" (ngSubmit)="saveNewUser(f)" #f="ngForm"> 
      <div class="form-inline"> 
       <label class="col-md-4">Name</label> 
       <input class="col-md-8" type="text" class="form-control" minlength="3" name="name" ngModel required #name="ngModel"> 
       <!-- <span class="text-muted" *ngIf="!name.valid && name.touched">Please enter a valid first name</span> --> 
      </div> 
      <div class="form-inline">  
       <label class="col-md-4">Email</label> 
       <input class="col-md-8" type="email" class="form-control" name="email" ngModel required #email="ngModel"> 
      </div> 
      <div class="form-inline">  
       <label class="col-md-4">Password</label> 
       <input class="col-md-8" type="password" class="form-control" name="password" ngModel required #password="ngModel"> 
      </div> 
      <div class="form-inline">  
       <label class="col-md-4">Confirm Password</label> 
       <input class="col-md-8" type="password" class="form-control" name="confirm_password" ngModel required #confirm_password="ngModel"> 
      </div> 
      <p *ngIf="password!=confirm_password"> 
       <strong> 
       Password do not match ! 
       </strong> 
      </p> 
      </form> 
     </div> 

component.ts

saveNewUser(form: NgForm) { 


} 

service.ts

create() { 

    } 

答えて

0
form; 

saveNewUser(form: NgForm) { 
    this.form = form.value; 
    console.log(this.form['name']); 
} 

とパスワードの:私はあなた `* ngIf`に追加したいと思います

<p *ngIf="password.value && confirm_password.value && (password.value!=confirm_password.value)"> 
+1

もう一つ:'

'これにより、ユーザは 'password'と' confirm_password'セクションに何かを入力した場合にのみ、パスワードを入力してプロンプトを表示できます。 –

+0

良い点。 'password.dirty'も使われます。 –

+0

@incognitoを編集します。追加フォームはまだ動作しません – Joseph

関連する問題