表单无法识别传递的属性值答案

【问题标题】：form not recognizing passed property values表单无法识别传递的属性值
【发布时间】：2017-10-01 07:46:28
【问题描述】：

在我的component.ts 文件中，我将值放入如下属性：

ngOnInit() {

        this.route.params.subscribe(params => {

            this.param = params['id'];
            this.pagesService.getEditPage(this.param).subscribe(page => {
                this.page = page;
            });

        });

    }

但是在模板中，我有一个带有文本输入和文本区域的表单，该表单的行为就好像它没有任何值一样。

这是表单代码：

<form novalidate #f="ngForm" (ngSubmit)="editPage(f)">
    <div class="form-group">
        <label for="">Title:</label>
        <input type="text" class="form-control" placeholder="Title" name="title" value="{{page?.title}}" [(ngModel)]="title" #pageTitle="ngModel"
            minlength="2" required />
    </div>
    <div class="alert alert-danger" *ngIf="pageTitle.errors?.required && pageTitle.touched">
        Title is required.
    </div>
    <div class="alert alert-danger" *ngIf="pageTitle.errors?.minlength && pageTitle.touched">
        Minimum length is 2.
    </div>

    <div class="form-group">
        <label for="">Content:</label>
        <textarea class="form-control" name="content" placeholder="Content" cols="30" rows="10" [(ngModel)]="content" #pageContent="ngModel"
            minlength="5" required>{{ page?.content }}</textarea>
    </div>
    <div class="alert alert-danger" *ngIf="pageContent.errors?.required && pageContent.touched">
        Content is required.
    </div>
    <div class="alert alert-danger" *ngIf="pageContent.errors?.minlength && pageContent.touched">
        Minimum length is 5.
    </div>

    <div class="form-group">
        <button class="btn btn-default" [disabled]="!f.valid">Edit page</button>
    </div>
</form>

显示表单时，文本输入具有正确的值，但它的行为好像没有，因为对其进行验证，并且 textarea 根本不显示真实内容，它显示占位符内容（但当我检查 textarea 时，我可以看到它的真实内容）。

是因为获取数据和显示表单之间的一些延迟还是什么？以及如何解决这个问题？

【问题讨论】：

标签： angular

【解决方案1】：

您同时使用ngModel 和value 滥用了模板驱动的表单。你也错过了关于 Angular 的全部想法，你的模型定义了应用程序的状态，而模板是一种装饰性地表达如何呈现该模型以供查看的方式。

您根本不应该使用value。使用[(ngModel)]="title"，您已经在放置此指令的输入控件和类中的变量title 之间正确地创建了双向绑定。当您希望更新输入时，您应该更改模型，视图会自动为您更新。因此，在您的.subscribe 中，您应该执行以下操作。

this.title = page.title

更新 title 会被 Angular 注意到，并且由于 [ngModel]="title"，该更改将在视图中体现出来。

与您的问题无关，但您也在滥用 RxJS。嵌套订阅是一种反模式和潜在的内存泄漏。对于make dependent requests using RxJS，您可以使用switchMap operator。

this.route.params
  .map(params => params.id) // or .pluck('id'), but you lose type safety
  .switchMap(params => this.pageService.getEditPage(params))
  .subscribe(page => this.page = page);

如果您出于某种原因需要保存params['id'] 的中间结果，您可以使用.do 运算符，或者在从.switchMap 中的lambda 返回之前简单地保存它。

【讨论】：