我用角度创建了一个简单的形式。我使用了两次验证。所需的验证工作正常，但 minLength 不起作用。
这是html代码：
<form [formGroup]="preferenceForm" (ngSubmit)="onSubmit()">
<div class="mb-3">
<label for="overs" class="form-label">Number of overs</label>
<input type="number" formControlName="overs" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.overs.errors }"
id="overs" placeholder="Overs..">
<div *ngIf="submitted && f.overs.errors" class="invalid-feedback">
<div *ngIf="f.overs.errors.required">First Name is required</div>
<div *ngIf="f.overs.errors.minlength">Choose at least 3 overs</div>
</div>
</div>
<div class="mb-3">
<label for="players" class="form-label">Number of players per team</label>
<input type="number" formControlName="players" class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.players.errors }" id="overs" placeholder="Players..">
<div *ngIf="submitted && f.players.errors" class="invalid-feedback">
<div *ngIf="f.players.errors.required">First Name is required</div>
<div *ngIf="f.players.errors.minlength">Choose at least 3 …如果用户在提交表单时未选择任何选项，我想在 mat-radio-group 上添加验证。这就是我到目前为止所做的，但它不起作用。
<mat-radio-group formControlName="{{e.Index}}">
<mat-label>{{ et.Title }}</mat-label>
<mat-radio-button *ngFor="let tq of e.Items" [value]="tq" [checked]="tq.IsSelected">
{{tq.Name}}
</mat-radio-button>
</mat-radio-group>
TS
elements.forEach((e, i) => {
case form.id: {
if (e.Required) {
a = { [name]: new FormControl('', Validators.required) };
} else {
a = { [name]: new FormControl('') };
}
etc ...
break;
}
}
我正在尝试按照本文添加一个 formArray 到我的表单中。我收到的错误粘贴在底部，似乎是[formControl]="devices.controls[i]"输入问题。该错误阻止我提供应用程序服务，但我无法弄清楚它出了什么问题。
超文本标记语言
<div formArrayName="devices">
<h3>Devices</h3>
<button (click)="addDevice()">Add Device</button>
<div *ngFor="let control of devices.controls; index as i">
<label>
Device:
<input type="text" [formControl]="devices.controls[i]">
</label>
</div>
</div>
TS
terminalNameInput = new FormControl();
devices = new FormArray([]);
addTerminalGroup = new FormGroup({
terminalNameInput : this.terminalNameInput,
devices : this.devices,
});
addDevice() {
this.devices.push(new FormControl(''));
}
完全错误
错误 TS2739：类型“AbstractControl”缺少类型“FormControl”中的以下属性：registerOnChange、registerOnDisabledChange、_applyFormState
我正在尝试在我的网站内创建一个论坛。在努力使用模板驱动表单来实现之后，我决定切换到响应式表单。我一直在整个网站上的两种方法之间切换，并意识到反应式表单有一个缺点，这导致我选择模板驱动的表单，并且我怀疑有一种值得解决的解决方法。我遇到的问题是，当用户想要编辑他们已经创建的内容时，我使用与创建时相同的表单，但将文档 ID 附加到路径中，如下所示：
localhost:4200/create-thread/some-thread-uid
当遵循此路线时，它会加载创建线程组件，但将已提供的数据预加载到适当的表单控件中。这是通过使用双向绑定将线程对象附加到相关表单的 ngModel 来完成的。像这样：
<!-- <form #finished="ngForm" (ngSubmit)="save(finished.value)">
<div class="form-group">
<label for="author">Author of thread:</label>
<input
#author="ngModel"
[(ngModel)]="thread.author"
name="author"
id="author"
class="form-control"
required
type="text">
</div>
</form>
我的问题是，有没有办法使用反应式表单来完成此任务（将云数据库中存储的对象中已提供的信息加载到输入字段中进行编辑）？我尝试了几种方法但无法弄清楚，包括将“thread.author”注入到表单生成器中的适当字段。任何帮助表示赞赏。
我正在尝试创建一个具有反应形式的角材料表。我需要添加一些属性，所以我使用 formArray。但我的表没有显示任何结果，并且角度让我返回相同的错误：
错误类型错误：无法读取未定义的属性（读取“headerCell”）
这是我到现在为止得到的：
超文本标记语言
<button mat-button mat-raised-button (click)="addParameterWhatsApp()" color="primary">Add</button>
<form [formGroup]="form" autocomplete="off">
<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8" formGroupName="whatsapp">
<ng-container formArrayName="parameters">
<ng-container *ngFor="let dados of parameters.controls; let i = index ">
<div [formGroupName]="i">
<ng-container matColumnDef="posicao">
<th mat-header-cell *matHeaderCellDef> Posicao </th>
<td mat-cell *matCellDef="let element">
<mat-form-field appearance="outline">
<mat-label>Posicao</mat-label>
<input matInput formControlName="posicao">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="valor">
<th mat-header-cell *matHeaderCellDef>Valor</th>
<td mat-cell *matCellDef="let element">
<mat-form-field appearance="outline">
<mat-label>Valor</mat-label>
<input matInput formControlName="valor">
</mat-form-field>
</td>
</ng-container>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; …我想禁用其中一个表单中的选择框，而在从服务器返回该选择框的数据之前，其中没有任何内容可供选择。我需要这样做，因为选择框中显示的数据取决于另一个选择框中选择的内容。每当在另一个选择框中选择某些内容时，我需要从服务器加载相应的选项。要在没有可用数据的情况下禁用选择框，我使用了如下所示的禁用属性：
<mat-select formControlName="formId" [disabled]="formNames.length === 0">
<mat-option
*ngFor="let formName of formNames"
[value]="formName.id"
>
{{ formName.formName }}
</mat-option>
</mat-select>
然后我订阅了valueChanges另一个选择框的事件，如下所示：
this.createForm.controls.formTypeId.valueChanges.subscribe((value: number) => {
this.formsService.getFormNames(value).subscribe((formNames) => {
this.formNames = formNames;
});
});
虽然这似乎工作得很好，但我不断在浏览器控制台中收到以下警告：
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach …我的密码问题和在我的角应用程序中确认密码有问题.我正在使用被动表单,错误显示"提供的参数与呼叫目标上的任何签名都不匹配"
ngOnInit() {
this.form = this.formBuilder.group({
name: [null, [Validators.required, Validators.minLength(3)]],
email: [null, [Validators.required, Validators.email]],
password: [null, Validators.required],
confirm_password: [null, Validators.required],
}, {validator: this.passwordConfirming('password', 'confirm_password')});
}
passwordConfirming(c: AbstractControl): { invalid: boolean } {
if (c.get('password').value !== c.get('confirm_password').value) {
return {invalid: true};
}
}
HTML
<div class="form-inline">
<label class="col-md-4">Password</label>
<input class="col-md-8" type="password" class="form-control" id="password" formControlName="password">
<span class="text-muted" *ngIf="!form.controls['password'].valid && form.controls['password']?.touched"> Password is required</span>
</div>
<div class="form-inline">
<label class="col-md-4">Confirm Password</label>
<input class="col-md-8" type="password" class="form-control" id="confirm_password" formControlName="confirm_password">
</div>
我正在使用Angular表单数据驱动方法，我向FormArray动态添加了表单控件，我使用form.reset（）重置了添加的控件，但是form.reset（）并不重置FormArray的长度，我发现这是一个已知的问题，可以使用https://github.com/angular/angular/pull/11051这种方法解决，但我对此尚不清楚。请帮忙，谢谢
reviewForm: FormGroup;
ngOnInit(){
this.reviewForm = new FormGroup({
'controlArray': new FormArray([
])
});
}
onSubmit(){
this.formData = new FormData(this.formService.formName, this.reviewForm.value.controlArray);
let formControls = JSON.stringify(this.formData);
// console.log(formControls);
this.formService.createForm(formControls)
.subscribe(
data => console.log(data),
error => console.error(error)
);
this.reviewForm.reset();
}
我有一个角度路由,在其中一个组件中我有简单的登录表单,并在模板中提供formGroup,它显示上面的错误.
步骤:在app模块中导入ReactiveFormsModule.
在路由组件中:
app.routingmodule.ts
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';
@NgModule({
declarations: [
LoginViewComponent, HomeViewComponent, CatalogViewComponent
],
imports: [
RouterModule.forRoot([
{ path: 'login', component: LoginViewComponent },
{ path: 'home', component: HomeViewComponent },
{ path: 'catalog', component: CatalogViewComponent },
{ path: '**', redirectTo: 'login' }
])
],
exports: [
RouterModule
],
providers: [],
})
export class AppRoutingModule …angular2-forms angular angular-reactive-forms angular4-forms
我正在尝试使用Reactive Form在Angular7中使用Validators.minLength和Validators.maxLength，但出现以下错误：
错误错误：期望的验证程序返回Promise或Observable。
这是我的打字稿代码：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from
'@angular/forms';
@Component({
selector: 'app-input-values',
templateUrl: './input-values.component.html',
styleUrls: ['./input-values.component.css']
})
export class InputValuesComponent implements OnInit {
inputValuesForm: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.inputValuesForm = this.fb.group({
interestRate: ['', Validators.required, Validators.minLength(2),
Validators.maxLength(5)]
})
}
这是我的模板html：
<form [formGroup]="inputValuesForm" (ngSubmit)="onSubmit()" class="form-horizontal">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Input Data</h3>
</div>
<div class="panel-body">
<div class="form-group" [ngClass]="{'has-error': inputValuesForm.get('interestRate').errors &&
(inputValuesForm.get('interestRate').touched || inputValuesForm.get('interestRate').dirty)}">
<label class="col-sm-4 control-label" …