我的反应形式是深层的三个组成部分.父组件创建一个没有任何字段的新表单,并将其传递给子组件.
首先,外形有效.稍后,子组件会添加带有验证器的新表单元素(失败),使外部表单无效.
我在控制台中收到ExpressionChangedAfterItHasBeenCheckedError错误.我想解决这个错误.
不知何故,只有当我添加第三级嵌套时才会发生这种情况.同样的方法似乎适用于两层嵌套.
Plunker: https ://plnkr.co/edit/GymI5CqSACFEvhhz55l1 ? p = preview
父组件
@Component({
selector: 'app-root',
template: `
myForm.valid: <b>{{myForm.valid}}</b>
<form>
<app-subform [myForm]="myForm"></app-subform>
</form>
`
})
export class AppComponent implements OnInit {
...
ngOnInit() {
this.myForm = this.formBuilder.group({});
}
}
子组件
@Component({
selector: 'app-subform',
template: `
<app-address-form *ngFor="let addressData of addressesData;"
[addressesForm]="addressesForm">
</app-address-form>
`
})
export class SubformComponent implements OnInit {
...
addressesData = [...];
constructor() { }
ngOnInit() {
this.addressesForm = new FormArray([]);
this.myForm.addControl('addresses', this.addressesForm);
}
儿童组件
@Component({ …我已经建立了一个带有两个参数的分页指令; 当前页面和总页数.
<pagination page="page" number-of-pages="numberOfPages"></pagination>
问题是我只会在AJAX调用之后知道numberOfPages的值(通过ng-resource).但是我的指令已经在AJAX调用完成之前呈现.
app.controller('MyController', function ($scope, $routeParams) {
$scope.page = +$routeParams.page || 1,
$scope.numberOfPages = 23; // This will work just fine
MyResource.query({
"page": $scope.page,
"per_page": 100
}, function (response) {
//This won't work since the directive is already rendered
$scope.numberOfPages = response.meta.number_of_pages;
});
});
我更喜欢等待渲染我的控制器模板,直到AJAX调用完成.
当AJAX调用完成时,Plan B将使用指令模板附加模板.
我无法解决这两种情况.
背景
仅当该组及其所有子项的所有同步验证均有效时，才会执行 FormGroup 上的异步验证。
问题
我想在所有子项都有效之前在 FormGroup 上执行 asyncValidator。
this.myForm = new FormGroup({
country: [ null, [ Validators.required ] ],
postalCode: [ null ],
unrelatedField1: [ null ],
unrelatedField2: [ Validators.min(123) ]
}, {
validators: [ postalCodeFormat ],
asyncValidators: [ postalCodeExists ]
})
我的自定义 postalCodeExists 验证器需要国家/地区和邮政编码字段。它不关心“unrelatedField2”的有效性。
有什么方法可以手动触发 FormGroup 的异步验证吗？
我的第一个想法
据我所知这是不可能的。
this.myForm.valueChanges.pipe(
map(...etc),
distinctUntilChanges(...etc)
).subscribe(() => {
if (this.myForm.get('country').valid && this.myForm.get('postalCode').valid) {
this.myForm.executeAsyncValidationPlease();
}
});
我的第二个想法
this.myForm = new FormGroup({
countryAndPostalCodeGroup: new FormGroup({
country: [ null, [ Validators.required ] ], …新的Universal Analytics重新引入了同步事件跟踪:https://developers.google.com/analytics/devguides/collection/analyticsjs/method-reference#sync.
但是文档不完整,它说:
"使用默认代码段加载analytics.js库时,此调用语法不起作用.默认代码段用于处理异步调用语法."
所以现在我只有一个默认(异步)代码段:
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-YY', 'mydomain.com');
ga('send', 'pageview');
</script>
我找不到任何关于同步调用的正确代码段.任何人？
我创建了一个新的@ angular/cli项目,并在根组件中添加了一个http GET调用.不使用代理,这工作正常.
export class AppComponent implements OnInit {
constructor(private http: Http) {}
ngOnInit() {
this.http
.get('https://dog.ceo/api/breeds/list/all')
.map(response => response.json())
.subscribe(data => console.log(data));
}
}
当我尝试在Angular CLI wiki中添加configure as describe时出错了.
我的proxy.conf.json文件:
{
"/api": {
"target": "https://dog.ceo",
"secure": false
}
}
我将组件中的URL更改为/api/breeds/list/all.我跑了ng serve --proxy-config proxy.conf.json
然后我在浏览器控制台中发出内部服务器错误消息.在我开始服务的终端中,我收到了这条消息[HPM] Error occurred while trying to proxy request /api/breeds/list/all from localhost:4200 to https://dog.ceo (EPROTO)
(https://nodejs.org/api/errors.html#errors_common_system_errors)
我已经尝试了其他几个配置选项和多个API.结果相似.
完整的代码可以在GitHub上找到:https://github.com/ErikNijland/angular-cli-proxy-test
使用的版本:
注意:我知道@ angular/cli正在使用Webpack.反过来又使用http-proxy-middleware.