angular 2 属性页面加载时未在模型中显示

Question

我正在尝试学习如何使用 angular2 和嵌套组件创建响应式表单。在 git 上查看了一些教程和不同的解决方案后，我发现 this by jonathanbruno，这似乎回答了我的许多问题。

提取解决方案后，我发现当运行时，description 值仅在用户开始在输入字段中输入时才添加到模型中，而我添加的默认值不显示(I have added the solution to stackblitz to show what I mean).

我一直在寻找这个问题的答案，发现 this plunk 没有出现相同的问题。 "Plunker" 中的解决方案与 jonathanb运行o 的解决方案之间存在一些明显的差异，但我无法理解为什么 jonathanb运行o 解决方案不是模型的一部分页面加载。

我的理解是 [(ngModel)]="parentModel.description" 启用组件和 HTML

之间的双向绑定

ParentComponent.ts

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {

  parentModel:ParentModel = new ParentModel();

  parentFormGroup:FormGroup;

  constructor(
    private _formBuilder:FormBuilder,
    private _cd:ChangeDetectorRef) { }

  ngOnInit() {
    this.parentFormGroup = this._formBuilder.group({
      description: ['this does not show', Validators.required]
    });
    console.log(this.parentFormGroup);
  }

  addChild() {
    this.parentModel.children.push(new ChildModel());
    this._cd.detectChanges();
  }
}

ParentComponent.html

<form [formGroup]="parentFormGroup">
    <label for="description">Description</label>
    <input type="text" [(ngModel)]="parentModel.description" formControlName="description"><br>
    <button (click)="addChild()">Add Child</button><br>
    <app-child-list [childrenList] = "parentModel.children" [parentFormGroup]="parentFormGroup"></app-child-list>
    {{parentFormGroup.valid}}
    <pre>{{parentModel | json}}</pre>
</form>

Answer 1

它正常工作：

如果您检查以下代码在控制台中的输出，您就会明白，

this.parentFormGroup = this._formBuilder.group({
    description: ['this does not show', Validators.required]
})
console.log(this.parentFormGroup.value);

该值首先被设置，然后被未定义的 ngModel 值覆盖，因为它变为空白

angular 2 属性页面加载时未在模型中显示

angular 2 property not showing in model on page load

angular

angular4-forms

angular 2 属性 页面加载时未在模型中显示

angular 2 property not showing in model on page load

angular

angular4-forms

angular 2 属性页面加载时未在模型中显示