app.component.html与app.component.ts之间的通信
app.component.html与app.component.ts之间的通信
提问于 2018-06-27 03:21:37
我已经在我的app.component.html文件中构建了一个角度表单，并且我正尝试通过app.component.ts文件将字段输入提交给一个API。我如何在.ts文件中引用来自.html文件的输入(在这里我将数据传递给API)？
.html文件中的submit按钮定义如下：
<button (click)="addCust(custJSON)" type="submit" class="btn btn-success" [disabled]="!customerForm.form.valid">Submit</button>在所有输入字段之外，也在.html文件中创建一个JSON对象：
<script>var custJSON = {{customerForm.value | json}};</script>
{{customerForm.value | json}}在我的.ts文件中定义的函数：
addCust(custJSON) {
this.httpClient.post(`api url`,
{
custName: custJSON.custName,
phone: custJSON.phone,
etc
})
.subscribe(
(data:any) => {
console.log(data);
}
)
}我现在得到的错误是custJSON是未定义的。在addCust方法中对数据进行硬编码可以很好地工作，但目标是将输入从表单上载到API。如何将数据从.html文件转移到.ts文件？
编辑:以下是我的表单的更新后的HTML：
<div class="container">
<form ngNativeValidate (ngSubmit)="onSubmit(customerForm)" action="/action_page.php" name="myForm" #customerForm="ngForm">
<div class="form-group row">
<label for="custName" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="custName" placeholder='Name' maxlength=100 required [(ngModel)]="model.custName" name="custName" #custName="ngModel" style="width: 40em">
</div>
<div [hidden]="custName.valid || custName.pristine" class="alert alert-danger">
Name is required
</div>
</div>
<div class="form-group row">
<label for="phone" class="col-sm-2 col-form-label">Phone</label>
<div class="col-sm-10">
<input pattern=".{14,14}" type="number" class="form-control" id="phone" placeholder="011 1 111 222 3333" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type = "number" minLength="14" maxLength="14" style="width: 18em" required [(ngModel)]="model.phone" name="phone" #phone="ngModel">
</div>
<!-- <button class="addfields" type="button" >+</button> -->
<br><div [hidden]="phone.valid || phone.pristine" class="alert alert-danger">
Phone is required
</div>
</div>
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">Email Address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder='ab@cd.com' maxlength=64 required [(ngModel)]="model.email" name="email" #email="ngModel" style="width: 40em">
</div>
<div [hidden]="email.valid || email.pristine"
class="alert alert-danger">
Email Address is required
</div>
</div>
<button type="submit" class="btn btn-success" [disabled]="!customerForm.form.valid">Submit</button>
</form>
<div [hidden]="!submitted">
<div class="row">
<div class="col-xs-3">JSON: <br></div>
<pre id="result"></pre>
</div>
<script>var custJSON = new JSON({{customerForm.value | json}});</script>
{{customerForm.value | json}}
<br><br><br><button class="btn btn-primary" (click)="submitted=false">Edit</button><br><br><br><br><br>
编辑:根据@penleychan进行编辑后更新ts文件：
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Customer } from '../customer';
import { HttpClient } from '@angular/common/http';
import {NgModule, Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { Injectable } from '@angular/core';
import { Customer } from './customer';
import 'rxjs/add/operator/toPromise';
import { CustomerFormComponent } from './customer-form.component';
@Component({
selector: 'app-customer-form',
templateUrl: './customer-form.component.html',
styleUrls: ['./customer-form.component.css']
})
export class CustomerFormComponent {
custName:string;
phone:number;
email:string;
model = new Customer('qt', 34823940903812, 't@t');
submitted = false;
constructor(private httpClient:HttpClient){ }
onSubmit(form: NgForm) {
console.log(form.value);
this.submitted = true;
this.httpClient.post<Customer>(`api url`,
{
custName: form.value.custName,
phone: form.value.phone,
email: form.value.email
//this.result = form.value;
})
.subscribe(
(data:any) => {
console.log(data);
}
)
}
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-27 04:20:04
因为你有ngSubmit，所以你不需要在你的按钮上点击事件。所以只需这样做：
在用于ngSubmit的NgForm传递的<form>上，如下所示：
<form ngNativeValidate (ngSubmit)="onSubmit(customerForm)" action="/action_page.php" name="myForm" #customerForm="ngForm">从按钮上删除(click)="addCust(customerForm)"。
现在，在你的组件和onSubmit()方法的typescript上，稍微修改一下，现在它将是：
onSubmit(form: NgForm) {
// Your logic...
console.log(form.value); // Log your form outputs for testing purpose.
}这里有一个stackblitz，以方便您的https://stackblitz.com/edit/angular-zcjvbt (我删除了手机上的正则表达式进行测试)
Stack Overflow用户
发布于 2018-06-27 03:36:59
您可以使用角度形式。例如：
<form [formGroup]="form">
<input formControlName="cust_name" value="cust_name">
<button (click)="addCust()" type="submit">Submit</button>
</form>在component.ts中
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
cust_name: ['', Validators.required],
});
}
addCust() {
const val = this.form.value;
this.httpClient.post(`api url`,
{
custName: val.cust_name,
})
.subscribe(
(data:any) => {
console.log(data);
}
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51050071
复制相关文章
相似问题