1

我有一个动态表单，我正在使用材料设计来显示文本框、复选框等。我已经动态添加了一些验证，它工作正常，但它没有显示最大长度和最小长度的消息。

动态验证不允许用户输入更多字符，但消息也不存在。

<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>

动态form.ts

@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();
  }

}

如何在输入字段下方或旁边显示验证消息？

我已经添加了 component.ts 文件。我将此组件用作子组件并发送以下内容： 1. 字段 - 由控件详细信息组成的数组 2. 将存储在表单中输入的数据的模型对象。3.formName
4.formgroup

4

0 回答 0