Question

我在有角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的库，该库为我们提供了很多优势，例如类型安全，将形式分解为子形式，访问嵌套错误等等。

要构建您在帖子中提到的内容，我可以通过以下方式进行操作：

创建一个“智能”组件，该组件将检索您的姓名（从服务器，本地存储，商店等）
创建一个“表单”组件，该组件将处理所有表单部分，并仅在保存后返回期望对象

这是有关如何使用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
这是类型安全的，因为我们将类型传递给父类NgxSubFormComponent<Planner>
我们使用getFormControls提供的NgxSubFormComponent定义表单控件，在那里我们也可以传递验证器

表单视图：

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子表单的更多信息，请访问Github页面https://github.com/cloudnc/ngx-sub-form并阅读自述文件，/src文件夹中的所有示例也应正确解释，并附有大量示例！

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

编辑：

如果您想走得更远，我刚刚在https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9

上发布了一篇博客文章，以解释有关表单和ngx-sub-form的许多内容。

如何形成验证无模型属性的角度

1 个答案: