在Angular 4中使用模板驅動表單發佈數據

-1

第一個問題是。我試圖使用HTTPCLIENT將數據從表單發佈到api。我很困惑我應該如何從表單中獲取值，以便我可以將其發佈到api。我使用模板驅動的形式。第二個問題，如果密碼不等於確認密碼，我還想執行* ngIf應該出現的「密碼不匹配」。但是在我的模式中，「密碼不匹配」這個短語總是出現。以下是我在下面嘗試的代碼。在Angular 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() { 

    }

來源

2017-09-26 Joseph

form; 

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

而對於密碼：

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

來源

2017-09-26 12:27:07

一兩件事，我想添加到您的'* ngIf'：'

'。這會讓用戶輸入密碼，只有當他/她在'password'和'confirm_password'部分輸入了某些內容時纔會得到提示。 –

好點。也可以使用'password.dirty'。將編輯 –

@incognito。添加表單仍然不起作用 – Joseph

在Angular 4中使用模板驅動表單發佈數據

回答

相關問題