个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
<分区>
我在父组件中有一个表单将数据作为输入属性传输到子组件，而子组件有一个表单读取此数据并使用此数据预填充其表单作为编辑用户配置文件的一种方式。在我尝试使用传输的数据设置输入字段的行中，chrome 返回一个控制台错误，指出它无法读取未定义的 setValue 属性。代码可能有什么问题？
这是代码:
this.eForm.setValue({
firstname: this.employee.user.firstname,
lastname: this.employee.user.lastname,
email: this.employee.user.email
});
子组件:
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { NgForm, ControlContainer } from '@angular/forms';
@Component({
selector: 'app-manager-view-employee-profile',
templateUrl: './manager-view-employee-profile.component.html',
styleUrls: ['./manager-view-employee-profile.component.css'],
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class ManagerViewEmployeeProfileComponent implements OnInit {
@ViewChild('f', {static: false}) eForm: NgForm;
@Input() employee: any;
constructor(private dataService: DataService) { }
ngOnInit() {
console.log(this.eForm);
console.log(this.employee.user.firstname);
this.eForm.setValue({
firstname: this.employee.user.firstname,
lastname: this.employee.user.lastname,
email: this.employee.user.email
});
}
onSubmit(f: NgForm){
}
}
子组件模板:
<form class="col-md-6" (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">First Name</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" name="firstname" ngModel required>
<span *ngIf="f.form.controls.firstname?.touched && !f.form.controls.firstname?.valid" style="color: red;">A is required.</span>
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">Last Name</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" name="lastname" ngModel required>
<span *ngIf="f.form.controls.lastname?.touched && !f.form.controls.lastname?.valid" style="color: red;">A is required.</span>
</div>
</div>
<div class="form-group">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">Email</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" name="email" ngModel required>
<span *ngIf="f.form.controls.email?.touched && !f.form.controls.email?.valid" style="color: red;">An email is required.</span>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!f.form.valid">Search</button>
</form>
0
我目前正在学习 angular ViewChild，但在使用 ViewChild 从 DOM 选择自定义引用变量时，我似乎遗漏了一些东西。 在我的模板中有两个表: 我正在尝试针对每个对象进行排序:
在我的组件中，我有以下内容: @ViewChild('PaginatedTableComponent') userTable: PaginatedTableComponent; 在这个组件中，我有以下
我正在使用父子组件。在子组件中，我使用搜索框。我需要随时按需获取搜索框值。如何获得？ 子组件 html - GridViewComponent 父组件 ts @ViewChild(GridviewC
我有两个组件，一个 videoComponent 和 videoControlsComponent。视频组件包含 元素和视频组件有一些按钮来操作 videoComponent 元素。 You
我想在我的 HTML 中打印一个 10x10 的网格。为此，我在我的 html 中使用了两个 ngFor。在我的 TypeScript 组件中，我想使用 @ViewChild 访问此表的单元格以将光标
在我的 Angular 应用程序中，我的 @ViewChild 实例无法填充 HTL matSort。 我的组件.ts: import { MatSort } from '@angular/mater
基本上不是这样做: class Controller implements AfterViewInit{ @ViewChild(IconComponent) iconComponent: Ic
我已经检查了这个问题的其他答案，但到目前为止似乎没有任何帮助。我正在尝试在 ionic 2 应用程序中显示 map 。但是当我尝试选择 #map 时div 它返回未定义。这是代码 page1.html
出于某种原因，我的 Angular 5 应用程序中的 @ViewChild 无法正常工作。我在我的组件中这样定义它: case-detail.component.html: 我在我的 C
我有这样一个组件: export class ParentComponent implements OnInit, OnDestroy { @ViewChild(ChildComponent)
我有一个名为 EasyBoxComponent 的组件，和一个带有此 @Viewchild 的 @Directive: @ViewChild(EasyBoxComponent) myComponent
需要帮助来理解以下语句中 {read: ViewContainerRef} 的含义。 @ViewChild('myname', {read: ViewContainerRef}) target; 最佳
在以前的angular版本中，我们可以像这样定义一个带有元素ref的viewchild @ViewChild('fileInput') fileInput: ElementRef; 现在我们必须在构造
Angular v8 刚刚发布。虽然它主要是向后兼容的，但还是有一些突破性的变化。 根据 Angular 的 Changelog一个核心变化是(我引用): “在 Angular 版本 8 中，要求所有
我在使用 @ViewChild 和通过 ngIf 显示的组件时遇到问题。我找到了各种解决方案，但没有一个对我有用。 这是我的主要组件，由多个步骤(为了简洁起见，我只在代码中显示 2 个)和一个用于向前
我正在尝试获取 audio组件内的元素。起初我是用老式的方式做的: $player: HTMLAudioElement; ... ngOnInit() { this.$player = docum
这个问题已经有答案了: What are all the valid selectors for ViewChild and ContentChild? (2 个回答) 已关闭 4 年前。 在本文中C
如果我的 fileInput 元素在一个普通的 div 中，那么它工作正常。但是如果我把它放在 里面然后我得到它未定义。 这是我的代码: HTML Modal title
我目前正在开发一个项目，我需要根据组件传递一些@input值。因此，该指令将相应地发挥作用。但问题是我无法获得该指令的引用。相反，我只得到了 elementRef 作为返回。请参阅下面的 stackb
我是 angular2 的新手，并不专业。我有一个父子组件，当用户单击按钮时，我希望子组件的选择器显示一些内容。所以它应该是条件，并且它也是从子组件中使用的。这是我的代码:父级 HTML:
我是一名优秀的程序员,十分优秀！