如何在 angular 中形成验证无模型属性

Question

我在 angular html 名称和日期中有 2 个文本框.. 但我没有用任何模型映射它。如何对此进行验证？

当我 google 所有验证仅基于 ngModel。如何对不是模型属性的组件属性进行验证？

提前致谢。

编辑：

 <form #dartForm='ngForm' (ngSubmit)='onSubmit(inputName.value, inputDate.value)'>
      <div class="row">
        <div class="form-group col col-12">
          <div class="form-group col col-6">
            <label for="username">Name: </label>
            <select #inputName class="form-control" id="username">
              <option>SELECT</option>
              <option>Monicka</option>
              <option>Hema</option>
              <option>Ramesh</option>
              <option>Madhavan</option>
              <option>Aadhavan</option>
              <option>Madhan</option>
              <option>Prasanth</option>
            </select>
          </div>
          <div class="form-group col col-6">
            <label for="date">Date:</label>
            <input type="text" #inputDate class="form-control" id="date">
          </div>
        </div>
      </div>
      <div class="form-group">
        <button class="btn btn-primary" type='submit'>Search</button>
      </div>
    </form>


export class PlannerComponent implements OnInit {

  constructor(private dartService: DartService) { }
  curDate = new Date();
  name: string;
  date: Date = this.curDate;
  darts: Dart[] = [];

在此我想验证姓名和日期...

Answer 1

我认为您应该使用 Angular 提供的内容：

模板表单
反应形式

选择你的选择。我个人偏爱响应式表单，因为我们在工作中构建了一个名为 ngx-sub-form 的库，它为我们提供了很多优势，例如类型安全、将表单分解为子表单、访问嵌套错误等等。

要构建您在 post 中提到的内容，我将按以下方式进行：

创建一个 "smart" 组件来检索您的姓名（从服务器、本地存储、商店等）
创建一个 "form" 组件，它将处理所有表单部分，并且仅 return 预期对象一旦被保存

下面是如何使用 ngx-sub-form 执行此操作的现场演示：https://stackblitz.com/edit/angular-knhgk5

现在让我们给出一些细节：

首先，让我们来编写我们的界面！

planner.interface.ts

export interface Planner {
  name: string;
  date: string;
}

然后让我们创建智能组件：

planner-container.component.ts

@Component({
  selector: 'app-planner-container',
  templateUrl: './planner-container.component.html',
  styleUrls: ['./planner-container.component.css']
})
export class PlannerContainerComponent {
  // those names would probably be fetched from a server
  // but hardcoded for the sake of simplicity in the demo
  public names: string[] = [
    'Monicka',
    'Hema',
    'Ramesh',
    'Madhavan',
    'Aadhavan',
    'Madhan',
    'Prasanth',
  ];

  public save(value: Planner): void {
    // todo: do whatever you want here
    // this method will be run only once the form is valid and sent
    console.log('Form has been sent!');
    console.log(value);
  }
}

智能组件将负责从服务中检索名称，并管理在表单有效并发送后要执行的操作。而已。它甚至不应该知道表单是如何实现的。

最重要的部分：表格

planner-form.component.ts

@Component({
  selector: 'app-planner-form',
  templateUrl: './planner-form.component.html',
  styleUrls: ['./planner-form.component.css']
})
export class PlannerFormComponent extends NgxSubFormComponent<Planner> {
  @Input() public names: string[];

  @Output() public save: EventEmitter<Planner> = new EventEmitter();

  public getFormControls(): Controls<Planner> {
    return {
      name: new FormControl(null, [Validators.required]),
      date: new FormControl(null, [Validators.required])
    }
  }

  public send(): void {
    this.save.emit(this.formGroupValues);
  }
}

这里有几点需要注意：

组件扩展 NgxSubFormComponent
它是类型安全的，因为我们将类型传递给父级 class NgxSubFormComponent<Planner>
我们使用 NgxSubFormComponent 提供的 getFormControls 定义表单控件，它也在那里我们可以通过我们的验证器

表单的视图：

planner-form.component.html

<form [formGroup]="formGroup" (ngSubmit)="send()">
  <select [formControlName]="formControlNames.name">
    <option value="">Select someone</option>
    <option *ngFor="let name of names" [value]="name">{{ name }}</option>
  </select>

  <input type="date" placeholder="Date" [formControlName]="formControlNames.date">

  <button type="submit" [disabled]="formGroup.invalid">Save</button>
</form>


<!-- debug -->
(CF console for output once the form is saved!)

<hr>

<p>Form value:</p>
<pre>{{ formGroupValues | json }}</pre>

<hr>

<p>Form errors</p>
<pre>{{ formGroupErrors | json }}</pre>

备注：

formGroup 由库定义，只允许您访问...表单组！
formControlNames 允许您以类型安全的方式访问所有表单控件名称，如果您编写了错误的变量名，打字稿将拾取它（在使用 AOT 编译时）
formGroupValues 让您可以访问值（我们要发送的最终对象！）
formGroupErrors 使您可以访问错误，因此您可以根据错误有条件地显示消息

有关 ngx-sub-form 的更多信息，请访问 Github 页面 https://github.com/cloudnc/ngx-sub-form 并阅读自述文件，在 /src 中也应通过大量示例正确解释所有内容文件夹！

您的示例的现场演示：https://github.com/cloudnc/ngx-sub-form

编辑：

如果你想更进一步，我刚刚发布了一篇博客 post 来解释很多关于表单的事情，ngx-sub-form 这里 https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9

如何在 angular 中形成验证无模型属性

How to form validate a no model property in angular

validation

angular-ngmodel

angular

angular7

如何在 angular 中形成验证无模型 属性

How to form validate a no model property in angular

validation

angular-ngmodel

angular

angular7

如何在 angular 中形成验证无模型属性