Javascript “最大长度”未显示验证消息
我有一个动态表单,其中我使用材质设计来显示文本框、复选框等。我动态添加了一些验证,它工作正常,但没有显示最大长度和最小长度的消息 动态验证不允许用户输入更多字符,但消息也不存在Javascript “最大长度”未显示验证消息,javascript,angular,angular-material,Javascript,Angular,Angular Material,我有一个动态表单,其中我使用材质设计来显示文本框、复选框等。我动态添加了一些验证,它工作正常,但没有显示最大长度和最小长度的消息 动态验证不允许用户输入更多字符,但消息也不存在 <mat-form-field class="example-full-width" style="width: 30%;"> <input matInput [placeholder]="input.title" [formControlName]="input.name"
<mat-form-field class="example-full-width" style="width: 30%;">
<input matInput [placeholder]="input.title" [formControlName]="input.name"
[(ngModel)]="inputData[input.name]" [required]="input.validator.required"
[minlength]="input.validator.minlength" [maxlength]="input.validator.maxlength">
<div class="error"
*ngIf="formCheck.get(formName).get(input.name).invalid &&
(formCheck.get(formName).get(input.name).dirty ||
formCheck.get(formName).get(input.name).touched)">
<div *ngIf="formCheck.get(formName).get(input.name).hasError('required')">Input required</div>
<div *ngIf="formCheck.get(formName).get(input.name).errors?.minlength">Minimum length is
{{input.validator.minlength}}</div>
<div *ngIf="formCheck.get(formName).get(input.name).errors?.maxlength">Maximum length is
{{input.validator.maxlength}}</div>
</div>
</mat-form-field>
如何在输入字段下方或旁边显示验证消息
我已经添加了component.ts文件。我将此组件用作子组件并发送以下内容:
1.字段-由控件详细信息组成的数组
2.模型对象,该对象将存储表单中输入的数据。
3.formName4.formgroup您在哪里定义变量
输入
?你确定它是控制类型的吗?
?是的,除了显示“最大长度”的验证消息外,一切都正常。我用的是这个,这里的字段是一个包含所有控件属性的控件数组:你能帮我们弄清楚formName的模型是什么样子吗?另外,请显示你的component.ts文件这是使用被动表单的非常糟糕的做法。请不要将ngModel用于被动形式。您在哪里定义变量输入
?你确定它是控制类型的吗?
?是的,除了显示“最大长度”的验证消息外,一切都正常。我用的是这个,这里的字段是一个包含所有控件属性的控件数组:你能帮我们弄清楚formName的模型是什么样子吗?另外,请显示你的component.ts文件这是使用被动表单的非常糟糕的做法。请不要使用带有反应形式的ngModel。。
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.css'],
})
export class DynamicFormComponent {
@Input() fields: formControls[] = [];
@Input() formCheck: FormGroup;
@Input() formName: string;
@Input() inputData: any;
constructor(private cdr: ChangeDetectorRef) { }
get value() {
return this.formCheck.value;
}
onValueChange(event) {
this.cdr.detectChanges();
}
}