标签: angular-reactive-forms

我们有一个 Angular 子表单，通过 Valuechanges 发出值。在父组件中，如果子组件的新邮政编码值与以前的邮政编码值不同，我们希望运行任务。

现在，我们正在创建一个变量来存储以前的邮政编码。

有没有更干净的方法来使用输出来执行此操作？我知道输入的 NgOnchanges，我们可以使用changes.previousValue 跟踪之前的更改。

好奇输出值变化是否有类似的情况？

儿童表格：

public addressSub = new Subscription();
public editAddressForm: FormGroup;
@Output addressFormChange = new EventEmitter<any>();

this.addressSub.add(this.editAddressForm.valueChanges.subscribe(data=> {
    this.addressFormChange.emit(this.editAddressForm);
})))

父组件：

在Parent中，它是订阅的。

public addressFormChangeEvent(addressFormEvent){
    this.addressMailingForm = addressFormEvent;
    if (this.addressMailingForm.get('zipCode') != previousZipCode) {
         doSomethingetc();
    }
    previousZipCode = this.addressMailingForm.get('zipCode');
}

Angular 库中是否有一些东西可以通过 ValueChanges 订阅查看以前的值？

编辑

由于上面 Chellappan 的回答，问题的第一部分得到了解决，但我遇到了其他问题，这让我做了一个 stackblitz，可以在这里找到： https ://stackblitz.com/edit/angular-ivy-bzh3dh

问题是我无法正确检索从表单中选择的产品列表，因为它们全部输出：

  "courses": [
    {
      "courseName": "Dessert",
      "products": [
        {
          "product": true
        },
        {
          "product": false
        },
        {
          "product": null
        }
      ]

我不知道如何能够检索类似的内容：

  "courses": [
    {
      "courseName": "Dessert",
      "products": [
        {
          "Crumble aux pommes": true
        },
        {
          "Mousse au chocolat maison": false
        },
        {
          "Riz au lait": false
        }
      ]

第二个问题是我的复选框的标签不是独立的。如果我添加新的“课程”并选择一些产品，其他课程中所有复选框的标签也会更改。

我希望我的帖子不要太乱，我不会经常在 Stack Overflow 上编辑消息

编辑结束

我有一个带有嵌套表单数组的反应式表单来描述包含多个课程的菜单，每个课程包含多个产品，但我不知道如何使其工作。我的实际问题是我无法检索第二级控件。

这是菜单的 json 结构：

{
  "name": "",
  "description": "",
  "price": "",
  "courses": [
    {
      "courseName": "",
      "products": [ …

这可能是我一段时间以来处理过的最令人沮丧的问题之一。一般来说，日期，尤其是 NgbDatepicker 在 Angular 中处理起来有点麻烦。

我正在 Angular 8 中针对反应​​式表单实现 NgbDatepicker，我的问题的要点是我可以设置日期控件的初始值，但该初始值不会（视觉上）显示在表单上。我可以将表单记录到控制台并看到该值已设置，但表单字段本身并未更新。如果我从选择器本身选择一个日期，那么我的选择会反映在表单字段中。我原以为这就像设置[startDate]ngbDatepicker 输入的属性一样简单，但显然不是。我对此尝试了很多不同的迭代；这就是代码方面的情况：

我的HTML：

<input #licenseExpiration="ngbDatepicker"
    class="form-control"
    fromControlName="licenseExpiration"
    [startDate]="startDate"
    ngbDatepicker />
<button class="btn btn-info zero-spacing pt-1 pr-1 pl-1"
    (click)="licenseExpiration.toggle()"
    type="button">

我的组件的相关部分：

@Component({
  selector: 'app-cert',
  templateUrl: './cert.component.html',
  providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
  ]
})
export class CertComponent implements OnInit {
  certForm: CertForm = new CertForm();

  constructor(
    public readonly formatter: CustomDateParserFormatter) { }

  ngOnInit() {
    this.certForm.setModel(...modelObjectFromOtherService...);
  }

  get startDate() {
    return { year: 2020, month: 6, day: 13 }; …

我试图用反应形式来做一些事情，但很难实现我认为简单的事情。

我想循环元素并将它们显示为表单控件。

我目前有：

@Component({
  selector: 'app-reactive-form-test',
  styleUrls: ['./reactive-form-test.component.scss'],
  template: `
    <form [formGroup]="questionForm">
      <ng-container formArrayName="questions" *ngFor="let question of questionForm.controls; let i = index">
<input type="text" formControlName="i">
</ng-container>
    </form>
  `
})
export class ReactiveFormTestComponent implements OnInit {
  questionForm: FormGroup;

  questions: ScheduledQuestionInterface[];

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.questionForm = this.fb.group({
      questions: this.fb.array([])
    });
    this.questions = [];
    this.questions.push(new ScheduledQuestion(1, 1, 1, 1));
    this.questions.push(new ScheduledQuestion(2, 3, 1, 2));
    this.questions.push(new ScheduledQuestion(3, 4, 1, 3));
    this.questions.forEach(value => {
      const control = this.questionForm.get('questions') …

我有一个表单数组，它是在从初始值为 false 的服务获取数据后动态设置的。

constructor(){
    this.form = this.fb.group({
        //...other controls...
        addOns: fb.array([])
    })
}
ngOnInit(){
    this.addonsService.getAll()
    .subscribe(result =>  {
      this.addOns = result;
      for(let addOn in this.addOns) {
        this.form.get('addOns').push(new FormControl(false));
      }
    });
}

然后我需要根据另一组值设置数组中的值。我努力了

var formArray = this.form.get('addOns') as FormArray;

然后循环过去，但这不起作用

formArray.controls.forEach(c => {
    c.setValue(true)
})

我也尝试按索引调用，但这返回未定义

formArray.controls[0].setValue(true);

如果我 console.log() formArray 我会得到预期数量的表单控件。

动态构建后如何设置 formArray 的值？

我需要你的帮助！我是 Angular Reactive Forms 的新手，我正在尝试使用 Angular 的 Reactive Forms 制作简单的表单并进行验证。但是我的代码的这一部分出现错误（ngIf directive, property \'invalid\'):

<div class="container">\n  <form class="card" [formGroup]="form" (ngSubmit)="submit()">\n    <h1>Angular Forms</h1>\n\n    <div class="form-control">\n      <label>Email</label>\n      <input type="text" placeholder="Email" formControlName="email">\n      <div\n        *ngIf="form.get(\'email\').invalid" \n        class="validation">\n      </div>\n    </div>\n\n    <div class="form-control">\n      <label>\xd0\x9f\xd0\xb0\xd1\x80\xd0\xbe\xd0\xbb\xd1\x8c</label>\n      <input type="password" placeholder="\xd0\x9f\xd0\xb0\xd1\x80\xd0\xbe\xd0\xbb\xd1\x8c" formControlName="password">\n      <div class="validation"></div>\n    </div>\n\n    <div class="card">\n      <h2>\xd0\x90\xd0\xb4\xd1\x80\xd0\xb5\xd1\x81</h2>\n\n      <div class="form-control">\n        <label>\xd0\xa1\xd1\x82\xd1\x80\xd0\xb0\xd0\xbd\xd0\xb0</label>\n\n        <select>\n          <option value="ru">\xd0\xa0\xd0\xbe\xd1\x81\xd1\x81\xd0\xb8\xd1\x8f</option>\n          <option value="ua">\xd0\xa3\xd0\xba\xd1\x80\xd0\xb0\xd0\xb8\xd0\xbd\xd0\xb0</option>\n          <option value="by">\xd0\x91\xd0\xb5\xd0\xbb\xd0\xb0\xd1\x80\xd1\x83\xd1\x81\xd1\x8c</option>\n        </select>\n      </div>\n\n      <div class="form-control">\n        <input type="text">\n      </div>\n\n      <button class="btn" type="button">\xd0\x92\xd1\x8b\xd0\xb1\xd1\x80\xd0\xb0\xd1\x82\xd1\x8c \xd1\x81\xd1\x82\xd0\xbe\xd0\xbb\xd0\xb8\xd1\x86\xd1\x83</button>\n    </div>\n\n    <div class="card">\n      <h2>\xd0\x92\xd0\xb0\xd1\x88\xd0\xb8 \xd0\xbd\xd0\xb0\xd0\xb2\xd1\x8b\xd0\xba\xd0\xb8</h2>\n      <button class="btn" type="button">\xd0\x94\xd0\xbe\xd0\xb1\xd0\xb0\xd0\xb2\xd0\xb8\xd1\x82\xd1\x8c \xd1\x83\xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb8\xd0\xb5</button>\n      <div …

我正在处理一种复杂的角度形式，我需要一些帮助。让我详细解释一下我的情况。

我有一个像这样的 formArray ：

let slides = new FormArray([]);
slides.push(getNewSlide())
slides.push(getNewSlide())
slides.push(getNewSlide())
slides.push(getNewSlide())

function getNewSlide() {
  return new FormGroup({
    name: new FormControl("", [Validators.required]),
    image: new FormControl("", [Validators.required])
  })
}

上面的表格将如下所示：

slides = [
  { name: "ram", image: "a.png" },
  { name: "shyam", image: "b.png" },
  { name: "", image: "c.png" },             <== here is error. name is required so index should be 2
  { name: "ghanshyam", image: "d.png" },
]

我想从中找到包含任何错误的表单索引FormArray，但我不知道该怎么做。一件重要的事情是，这种形式可以嵌套。就像一个FormGroup可以包含另一个FormGroup或FormArray

任何人都知道深度扫描整个表格并找到第一个错误位置的索引（表格索引），然后请在这里回答。我会欣赏你的想法。

谢谢。

我使用 primeng 作为模板。我正在使用 p-fileupload 组件，但我需要以反应形式使用它，所以我想知道将 formControlName 放在哪里，因为我没有得到任何输入或要添加的标签。

我只看到它的输入并在上面放置了一个标识符，但我想知道这个组件是否可以。

有什么建议么？

谢谢，指教！！

我有这个表单组:

this.form = fb.group({
  'teacher': [''],
  'schools': fb.array([
    fb.group({
      'school_name': [''],
      'school_description': [''],
    })
  }) 
});

问题是:

如何通过函数school_city以FormArray编程方式将新表单控件(命名)添加到特定*组？

我想在数组中设置值,如下所示:

this.form.controls[name].setValue('name')

但我正在使用数组表单,这是行不通的,即使我传递特定数组表单的索引

例如,这是我的表单数组,我想要做的是在函数中设置值

user: FormGroup;
  users: FormGroup;

  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.user = this.buildGroup();
    this.users = this.fb.group({
      data: this.fb.array([this.user])
    });
  }
  get fData() {
    return this.users.get('data') as FormArray;
  }
  buildGroup() {
    return this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required]
      })
    });
  }
setValue(index) {
   this.fData[index].controls[name].setValue('name')
  }
  onSubmit() {
    this.fData.push(this.buildGroup());
    const {valid, value} = this.fData;
    console.log(valid, value);
  }

但是this.fData [index] .controls [name] .setValue('name')这个不起作用