我的要求是我需要创建一个带有嵌套组件的表单.我正在为每个表单字段创建组件意味着对于文本框会有一个组件,对于单选按钮会有另外一个组件就像明智一样.
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>
我想使用Reactive表单来创建这个表单,因为我希望我的html不受影响,只通过打字稿进行表单验证.
但是我找不到任何解决方案我们如何能够将反应形式与组件嵌套.
我正在使用Angular2-rc5,我目前在登录页面上收到错误.我正在尝试创建一个表单,但是控制台抛出异常告诉我formcontroll即使我在init上创建它也无法找到我的s.知道我为什么会收到这个错误吗？
登录组件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { LoginService } from './login.service';
import { User } from '../../models/user';
@Component({
selector: 'login',
providers: [LoginService],
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
private loginForm: FormGroup; // our model driven form
private submitted: boolean; // keep track on whether form is submitted
private events: any[] = []; // use later to display form changes
constructor(private …在我工作的公司,我们正在开发一个具有多种形式的大型应用程序,用户需要填写这些应用程序才能注册我们的程序.当所有问题都得到回答后,用户就会到达一个部分,该部分总结了所有答案,突出显示无效答案,并让用户有机会重新访问上述任何一个表格步骤并修改他们的答案.该逻辑将在一系列顶级部分中重复,每个部分具有多个步骤/页面和摘要页面.
为实现这一目标,我们为每个单独的表单步骤(它们是"个人详细信息"或"资格"等类别)创建了一个组件,以及它们各自的路由和摘要页面的组件.
为了尽可能保持DRY,我们开始创建一个"主"服务,其中包含所有不同表单步骤(值,有效性等)的信息.
import { Injectable } from '@angular/core';
import { Validators } from '@angular/forms';
import { ValidationService } from '../components/validation/index';
@Injectable()
export class FormControlsService {
static getFormControls() {
return [
{
name: 'personalDetailsForm$',
groups: {
name$: [
{
name: 'firstname$',
validations: [
Validators.required,
Validators.minLength(2)
]
},
{
name: 'lastname$',
validations: [
Validators.required,
Validators.minLength(2)
]
}
],
gender$: [
{
name: 'gender$',
validations: [
Validators.required
]
}
],
address$: [
{
name: 'streetaddress$',
validations: [
Validators.required
]
},
{
name: …我想将父组件的FormGroup传递给它的子组件,以便使用子组件显示错误消息
鉴于以下父母
import { Component, OnInit } from '@angular/core'
import {
REACTIVE_FORM_DIRECTIVES, AbstractControl, FormBuilder, FormControl,
FormGroup, Validators
} from '@angular/forms'
@Component(
{
moduleId: module.id,
selector: 'parent-cmp',
templateUrl: 'language.component.html',
styleUrls: ['language.component.css'],
directives: [
ErrorMessagesComponent]
})
export class ParentCmp implements OnInit {
form: FormGroup;
first: AbstractControl;
second: AbstractControl;
constructor(private _fb: FormBuilder) {
this.first =
new FormControl('');
this.second = new FormControl('')
}
ngOnInit() {
this.form = this._fb.group(
{
'first': this.first,
'second': this.second
});
}
}
import { Component, OnInit, Input …我是Angular的新手.我正在使用Angular 4.其中需要将base64 Image作为模型成员之一发送到web api.是否有一个Angular组件或指令将base64绑定到所述模型？
感谢并感谢您的帮助.
我有2个数组。我正在实现一个 Angular 拖放，我想使用 FormArray 来保存元素被放入的数组。
问题是我无法将 formcontrol 应用于 div，因为它给出了错误
错误：没有名称为“语言”的表单控件的值访问器
这是html
<div>
<div class="example-container">
<h2>Selected Languages</h2>
<div
cdkDropList
#todoList="cdkDropList"
[cdkDropListData]="anotherarray"
[cdkDropListConnectedTo]="[doneList]"
class="example-list"
(cdkDropListDropped)="drop($event)"
formControlName="language">
<div class="list-group-item list-group-item-action " *ngFor="let item of anotherarray" cdkDrag>
{{item}}
</div>
</div>
</div>
<div class="example-container">
<h2>Available Languages</h2>
<div
cdkDropList
#doneList="cdkDropList"
[cdkDropListData]="testingarray"
[cdkDropListConnectedTo]="[todoList]"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="list-group-item list-group-item-action " *ngFor="let item of testingarray" cdkDrag>{{item}}</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary my-2" translate>saveButtonLabel
<fa-icon *ngIf="saveIcon" [icon]="saveIcon" [spin]="saveIcon.iconName === 'spinner'"></fa-icon>
</button>
</form>
angular-material angular-dragdrop angulardraganddroplists angular angular-cdk
我正在开发一个 Angular 项目，在构建项目时遇到一些错误。我正在使用材料设计。但我不确定如何解决这个问题。请看一下并帮助我。
这是组件代码。
export class TestComponent {
...
public createEventGroup: FormGroup
public constructor(
...
) {
this.createEventGroup = new FormGroup({
eventName: new FormControl(),
eventDescription: new FormControl(),
eventGraphicAttachment: new FormControl(''),
...
});
}
...
这是 HTML 代码
<mat-form-field class="event-graphic">
<mat-label>Event Graphic</mat-label>
<ngx-mat-file-input placeholder="Basic Input" formControlName="eventGraphicAttachment">
</ngx-mat-file-input>
<mat-icon matSuffix>folder</mat-icon>
</mat-form-field>
这是错误日志
core.js:6210 ERROR Error: No value accessor for form control with name: 'eventGraphicAttachment'
at _throwError (forms.js:1732)
at setUpControl (forms.js:1506)
at FormGroupDirective.addControl (forms.js:5253)
at FormControlName._setUpControl (forms.js:5835)
at FormControlName.ngOnChanges (forms.js:5780)
at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1520) …我试图建立一个Angular Reactive表单，其中一个帐户可以添加许多学生。
该表格似乎有效。当您点击添加学生时，它会创建一个新学生，但您会在控制台上看到提示
错误错误：找不到路径为'studentsArray-> 1-> firstName的控件
以此类推。
app.component.html
<form [formGroup]="accountForm">
<div>
<input formControlName="firstName" placeholder="First name">
</div>
<div>
<input formControlName="lastName" placeholder="Last name">
</div>
<div>
<input formControlName="phone" placeholder="Phone">
</div>
<div>
<input formControlName="email" placeholder="Email">
</div>
<button (click)="addStudent()" *ngIf="!showStudentForm">Add Student</button>
<div formArrayName="studentsArray">
<div *ngFor="let student of studentsArray.controls; let i = index" [formGroupName]="i">
<input formControlName="firstName" placeholder="First Name">
<input formControlName="lastName" placeholder="Last Name">
<input formControlName="dob" placeholder="Date of Birth">
</div>
</div>
app.component.ts
import { Component, Input, OnChanges } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray, FormBuilder } …我正在使用 ionic 5 和 Angular 9。我正在尝试创建一个反应式表单，但出现错误“没有名称的表单控件的值访问器：'姓氏'”。
这是我的代码：
export class ModalComponent implements OnInit {
public form: FormGroup;
constructor(private modalController: ModalController,
private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.initForm();
}
public close(): void {
// using the injected ModalController this page
// can "dismiss" itself and optionally pass back data
this.modalController.dismiss({
'dismissed': true
});
}
public initForm(): void {
this.form = this.formBuilder.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required]
});
}
logForm(){
console.log(this.form.value)
}
}
<form [formGroup]="form" (ngSubmit)="logForm()" novalidate>
<ion-item>
<ion-label>Last name</ion-label> …从这个例子开始工作https://stackblitz.com/edit/ng-recaptcha-example?file=src%2Fapp%2Fapp.component.ts
在我的表格中，我有以下内容。
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<mat-form-field class="example-full-width">
<input matInput placeholder="{{'Email' | translate}}" formControlName="email" [errorStateMatcher]="matcher">
<mat-error *ngIf="loginForm.controls['email'].hasError('email') || loginForm.controls['email'].hasError('required')">
{{"Enter a valid email address" | translate}}
</mat-error>
</mat-form-field>
<re-captcha formControlName="recaptchaReactive"></re-captcha>
</form>
电子邮件字段（以及我省略的密码）可以使用。在组件中，我有以下内容。
loginForm = new FormGroup({
email: new FormControl('', [
Validators.email,
Validators.required
]),
password: new FormControl('', [
Validators.required,
Validators.minLength(8)
]),
recaptchaReactive: new FormControl(null, Validators.required)
});
angular ×10
forms ×2
javascript ×2
angular-cdk ×1
angular9 ×1
architecture ×1
base64 ×1
components ×1
directive ×1
form-control ×1
formarray ×1
formgroups ×1
ionic5 ×1
typescript ×1
upload ×1