标签: angular-template-form

快速提问。这是那些令人烦恼的小错误之一。我在延迟加载的注册模块中有一个 Angular 反应形式。代码结构如下：

TS

get email() {
  return this.myForm.get('email');
}
// This code works from within the component, but not when referenced from within the template.

超文本标记语言

<div class="errors" *ngIf="email.errors?.required && email.touched">Must enter email</div>

在模板中，div 永远不会显示，因为即使存在错误，表达式也永远不会计算为 true。我已经检查过控制台。

更令人困惑的是，我在 中使用 getter 没有问题component.ts，事实上，我的方式console.log是通过编写console.log(this.email.errors). 这很好用。但模板中没有。

我的混乱解决方案是直接访问错误，这确实有效：

<div class="errors" *ngIf="myForm.controls.email.errors.required && myForm.controls.email.touched">
  Must enter email
</div>
// This works! As you can see the expression is very long and messy.

任何帮助表示赞赏！

当通过 formReset 方法重置表单时，有没有办法收到通知？

我有一个注入表单的指令，当提交表单或通过重置按钮重置表单时，我可以收到通知，但我无法找到在 ngForm 上调用 formRest 时收到通知的方法。

@Directive({
  selector: '[appForm]'
})
export class FormDirective implements OnDestroy {
  private subscription: Subscription;

  constructor(form: NgForm) {
    this.subscription = form.ngSubmit.subscribe(() => {
      console.log('submitted');
    });
    form.onReset = () => {
      console.log('reset');
    };
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

使用类似指令

<form appForm #form="ngForm">
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" (click)="form.resetForm()">Angular reset</button>
</form>

有没有办法通知我的指令resetForm方法已被调用？

StackBlitz 的演示https://stackblitz.com/edit/angular-adymlf?file=src/app/form.directive.ts

在我的 Angular 应用程序模板驱动表单中，我有一个出生日期字段，并为该字段添加了 ngbDatepicker 作为给定。

<input #dob="ngbDatepicker"
                 (click)="dob.toggle()"
                 [(ngModel)]="model.dob"
                 [ngClass]="{ 'is-invalid': f.submitted &&  dob.invalid }"
                 class="form-control"
                 id="dob"
                 name="dob"
                 required
                 type="text"
                 [disabled]="isDisabled"
                 [class.ash]="isDisabled"
                 [class.highlight]="!isDisabled"
                 ngbDatepicker
          />

我正在从后端 API 获取出生日期，dob: "2019-02-16 00:00:00"并且我想像下面那样传递该值，

 { 
  "year": 2019, 
  "month": 2, 
  "day": 26 
 }

因为 ngbDatepicker 以该格式获取值。这就是我试图转换我的出生日期。

toDate(dob) {
 const [year, month, day] = dob.split('-');
 const obj = { year: year, month: month, day: day.split(' ')[0].trim() };
 console.log('convert date', obj);
 this.model.dob = obj;
 //  this.model.dob ={year: 2017, month: 5, day: 13};
}

输出是{year: …

我有一个复杂的对象，即，如下所示

someName = [
{name: "John",id: "1",rating: ['0', '1', '2', '3', '4', '5']},
{name: "robert", id: "2", rating: ['0', '1', '2', '3', '4', '5']},
{name: "luv", id: "3", rating: ['0', '1', '2', '3', '4', '5']}
];

我想从中制作一份问卷，以确保他们从 0 到 5 给他们的答案打分，现在当我渲染我的 html 时，如下所示

<ng-container *ngFor="let sort of someName; let i=index">
   <label id="example-radio-group-label">Rate your favorite section</label>
   <mat-radio-group aria-labelledby="example-radio-group-label" class="example-radio-group" [(ngModel)]="sectionRating">
      <mat-radio-button class="example-radio-button" *ngFor="let section of sort.sections" [value]="section">{{season}}</mat-radio-button>
   </mat-radio-group>
</ng-container>

这是正确呈现的，但是当我选择我的第一个问题评级为 1 时，它也从所有其他评级中进行选择，而且我想捕获这些我尝试过的每个评级，[(ngModel)]但它只给出一个值而不是数组

在我的 .ts 文件中，我将模型引用作为 Array 提供，如下所示：

sectionRating: any[] …

我正在尝试在我的网站内创建一个论坛。在努力使用模板驱动表单来实现之后，我决定切换到响应式表单。我一直在整个网站上的两种方法之间切换，并意识到反应式表单有一个缺点，这导致我选择模板驱动的表单，并且我怀疑有一种值得解决的解决方法。我遇到的问题是，当用户想要编辑他们已经创建的内容时，我使用与创建时相同的表单，但将文档 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”注入到表单生成器中的适当字段。任何帮助表示赞赏。

我正在研究 Angular 10。已经 3 天了，我遇到了 Angular 模板驱动和反应式表单的问题。

我想做的：创建一个包含许多子组件的复杂表单（以便分离大量代码）。然后单击一个按钮，我想验证所有表单和子组件。我想以某种方式验证子组件。

我创建的内容：具有双向绑定的模板驱动表单，因为我相信它更容易并且对于我的情况来说不需要。

我已经设法使验证仅适用于基本表单。我无法在儿童组件上做到这一点。我看到很多关于这个问题的帖子并尝试了很多，但我很困惑。

我的代码：

mainForm.html

<div class="card m-3">
    
    <div class="card-body">
      <fieldset>
        <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
        
            <div class="form-row">
                <div class="form-group col">
                    <label>Title</label>
                    <select name="title" class="form-control" [(ngModel)]="model.title" #title="ngModel" [ngClass]="{ 'is-invalid': f.submitted && title.invalid }" required>
                        <option value=""></option>
                        <option value="Mr">Mr</option>
                        <option value="Mrs">Mrs</option>
                        <option value="Miss">Miss</option>
                        <option value="Ms">Ms</option>
                    </select>
                    <div *ngIf="f.submitted && title.invalid" class="invalid-feedback">
                        <div *ngIf="title.errors.required">Title is required</div>
                    </div>
                </div>
                <div class="form-group col-5">
                    <label>First Name</label>
                    <input type="text" name="firstName" class="form-control" [(ngModel)]="model.firstName" #firstName="ngModel" [ngClass]="{ 'is-invalid': …

我已经使用模板表单构建了一个包含大量输入的大表单。现在，我有了一个动态添加一部分输入的要求。由于使用Reactive Form动态添加输入似乎更容易，因此我想将输入的特定部分更改为Reactive Form。

那么有可能在同一个表单标签中混合反应形式和模板形式吗？

我有一个角度模板驱动的表单，当我单击产品时，我想在其中填充值。“description”和“imageUrl”字段可能未定义，如果我不处理它，就会破坏我的表单。我设法用这个解决方案做到了：

  private initFormEdit() {
    this.product = this.productService.fetchProduct(this.restaurantId, this.productId);

    // I'm using a ternaty operator to put a default value if objects are empty
    const description = this.product.description ? this.product.description : '';
    const imageUrl = this.product.imageUrl ? this.product.imageUrl : '';

    this.productForm.setValue({
      name: this.product.name,
      category: this.product.category,
      description,
      price: this.product.price,
      imageUrl
    });
  }

有没有更简单或更干净的方法来做到这一点？谢谢 ！