在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中使用模板驱动表单发布数据

回答

相关问题