angular - 如何在角度调用setter方法
问题描述
我想使用 setter 方法更新我的表单。我应该在哪里调用 setter 方法?这是我的 component.ts 代码
export class UpdateZoneComponent implements OnInit {
profileForm: FormGroup
products: any;
h: number;
constructor(private http: HttpClient, private formBuilder: FormBuilder, private route:
ActivatedRoute) { }
ngOnInit() {
this.profileForm = this.formBuilder.group({
zone_name: [''],
zone_id: ['']
});
//这里的id来自一个有点击事件的组件
this.route.paramMap.subscribe(routeParam => {
const id = +routeParam.get('id');
console.log(id)
this.h = id
})
this.http.get("http://192.168.8.219:8835/zonedata/" + this.h).subscribe(
(res: any) => {
console.log(res)
const response = res.data;
const nameZone = res.data.zone_name;
console.log(nameZone)
}
)
}
// 这里我们要使用 setter 方法更新区域名称
set zone_name(name) {
console.log("hello")
let strg = this.profileForm.get("zone_name").setValue(name);
console.log(strg)
}
save(value: any) {
console.log(value)
const url = `${"http://192.168.8.219:8835/zonedata"}${this.h}`;
this.http.put(url, this.products).subscribe((dataa) => {
console.log(dataa)
this.zone_name();
})
}
}
<form [formGroup]="profileForm" #zoneData (ngSubmit)="save(profileForm.value)">
<div class="form-group row">
<label for="zname" class="col-sm-2 col-form-label">Zone Name</label>
<div class="col-sm-10 txt-box">
<input type="text" name="zname" formControlName="zone_name"
id="zoneName" class="form-control" placeholder="Enter"
[value]="zone_name" >
<p style="color: white">{{zone_name}}</p>
</div>
</div>
<div class="form-group row">
<div class=" col-md-10">
<button type="submit" class="a-btns btn btn-success">Save</button>
</div>
</div>
</form>
解决方案
当您在角度使用反应式表单时,您当然不需要更新表单字段。值会自动更新。你会得到你所做的每一个改变。
在你的构造函数中添加它,你会发现你对反应表单所做的更改。
constructor() {
this.profileForm.valueChanges.subscribe((res) => {
console.log(this.profileForm.value);
});
}
推荐阅读
- javascript - 在原型上的多个函数之间共享状态
- css - 在小屏幕上的下一行制作按钮,但在 Bootstrap 4 的大屏幕上保持在同一行
- dart - 按索引更改映射条目值
- c# - 我应该如何“等待”C# Polly 策略列表?
- android - 如何在 AndroidManifest.xml 中包含库中的服务
- javascript - 如何使用 v-for 有条件地显示图标?
- laravel - 如何在 Laravel 中的 URL 中传递值
- amazon-web-services - 多个容器共享单个 GPU
- sql - Oracle EBS REST API
- apache - 为什么我在 Apache 2.4 上有重复的标头?