标签: reactive-forms

我有 Angular 反应式表单，其中每个输入都是一个单独的组件，它接收父表单为@Input(). 在这个组件中，我想订阅他的错误，并更改变量值，如果有一些错误。每个控件的错误不仅来自值变化，所以我无法检查模糊或值变化的错误。这样做的正确方法是什么？

表单.html

<form [formGroup]="formName">
   <app-input-group [parentForm]="formName" [name]="controlName"></app-input-group>
</form>

输入组.ts

export class InputGroupComponent {
  @Input parentForm: FormGroup
  @Input name: string

  public status: string

  // Need to call this function when control in form have errors
  public getStatus() {
     if (this.parentForm.get(this.name).errors) {
        this.status = 'suspended'
     } else {
        this.status = 'boosted'
     }
  }
}

我正在使用 ionic 5 和 Angular 9。我正在尝试创建一个反应式表单，但出现错误“没有名称的表单控件的值访问器：'姓氏'”。

这是我的代码：

export class ModalComponent implements OnInit {

  public form: FormGroup;

  constructor(private modalController: ModalController,
              private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.initForm();
  }

  public close(): void {
    // using the injected ModalController this page
    // can "dismiss" itself and optionally pass back data
    this.modalController.dismiss({
      'dismissed': true
    });
  }

  public initForm(): void {
    this.form = this.formBuilder.group({
      firstname: ['', Validators.required],
      lastname: ['', Validators.required]
    });
  }

  logForm(){
    console.log(this.form.value)
  }
}

<form [formGroup]="form" (ngSubmit)="logForm()" novalidate>
    <ion-item>
      <ion-label>Last name</ion-label> …

我使用angular 2 formbuilder来创建一个表单,我想根据无线电盒输入的变化有条件地验证输入字段.当我点击百分比单选框时,应该验证百分比输入.当我点击金额单选框时,它应该验证金额输入字段.

HTML代码

(我正在使用材料输入组件)

<md-radio-group formControlName="splitType" (click)="splitTypeClicked()">
      <md-radio-button value="amount">Amount</md-radio-button>
      <md-radio-button value="percentage">Percentage</md-radio-button>
</md-radio-group>

<input  mdInput  placeholder="Amount" formControlName="amount"  >
<input  mdInput   placeholder="Percentage" formControlName="percentage"  >

角度2分量

constructor(private fb: FormBuilder){}

  ngOnInit() {

    this.splitChargeForm = this.fb.group({
      splitType: ['', Validators.required],
      amount: [''],        //validate when splitType = amount
      percentage: ['']     //validate when splitType = percentage

   });

我有一个简单的搜索组件，其中包含带有2个元素的反应形式：

• 文字输入（搜索任意匹配的文字）
• 复选框（包括/排除已删除的结果）

到目前为止，我使用它myFormGroup.valueChanges.subscribe(...)来执行搜索方法。

现在的问题是，我想对文本输入进行反跳操作。同时不要取消反跳复选框，因此单击该复选框时，搜索方法将立即执行。

valueChanges.debounceTime(500)当然，使用will会反跳整个表单。那不是我想要的

这是一个简化的示例。实际形式还有更多输入。有些应该去抖动，有些则不应该。

有没有简单的方法可以做到这一点？还是我必须分别订阅每个表单控件？

很高兴看到您是如何解决此问题的。

提前致谢。

编辑：代码

export class SearchComponent {

  myFormGroup: FormGroup;

  constructor(fb: FormBuilder) {
    this.myFormGroup = fb.group({
      textInput: '',
      checkbox: false
    });
  }

  ngOnInit() {
    this.myFormGroup.valueChanges.subscribe(val => {
      // debounce only the textInput,
      // and then execute search
    });
  }

}

我需要帮助使行仅在选中复选框时才启用。应该禁用默认行，但是仅选中复选框时，将启用该行。这是我的代码的链接

链接代码

  patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
      rows.push(this.fb.group({
        checkbox_value: [null],
        material_id:  new FormControl({value: x.id, disabled: true}, Validators.required),
        material_name: x.name, 
        quantity: [null, Validators.required]
      }))
    })
      })

  }

我正在尝试使用Angular ReactiveForms生成动态表单.目前我收到错误Cannot find control with path 'myFormArray -> [index] -> myProperty.我已经检查了一些在互联网上找到的答案但没有成功.这是我的代码:

HTML:

<form [formGroup]="myForm">
    <div formArrayName="myFormArray" *ngFor="let ctrl of foo.controls; let i=index">
        <div [formGroupName]="i">
            <input matInput type="text" formControlName="myProperty">
        </div>
    </div>
</form>

TS:

export class MyClass implements OnChanges {

  @Input() myData: any;

  myForm: FormGroup;

  get foo(): FormArray{
    return <FormArray>this.myForm.get('myFormArray');
  }

  constructor(private fb: FormBuilder) { }

  ngOnChanges() {
    if (!this.myForm) {
      this.myForm = this.fb.group({
        myFormArray: this.fb.array([this.buildMyFormArray()])
      });
    }

    this.myForm.setControl('myFormArray', this.fb.array(myData || []));
  }

  buildMyFormArray(): FormGroup {
    return this.fb.group({
      myProperty: '' …

我有我正在设置的这种反应形式：

const v = Validators;

this.entryForm = this.formBuilder.group({

  firstName: ['', [v.minLength(2), v.required]],
  lastName: ['', [v.minLength(2), v.required]],
  email: ['', [v.email, v.required]],
  instagram: ['', [v.minLength(2), v.required]],
  company: [''],
  title: [''],
  agree: [false, v.requiredTrue],

});

但是在我打电话之后this.entryForm.reset()，比如：

this.entryForm.reset();

...表单控件entryForm是null，导致错误。即使我尝试重新实例化FormGroup，我仍然会看到null表单控件。我到底做错了什么？

这是完整的组件 TypeScript：

@Component({
  selector: 's2es-enter-page',
  templateUrl: './enter-page.component.html',
  styleUrls: [
    './enter-page.component.sass',
  ]
})
export class EnterPageComponent extends AbstractPageComponent implements OnInit {

  entryForm: FormGroup;
  inited = false;

  constructor(
    private readonly pageService: PageService,
    private readonly http: HttpClient,
    private …

我有2个输入字段:名称和姓氏.我有2个按钮:提交和'添加一个人'.单击"添加人"应添加一组新字段(名称和姓氏).怎么实现呢？我找到了如何动态添加单个输入字段的解决方案,但在这里我需要添加一个集合

我的代码现在没有"添加人"功能:

import { FormControl, FormGroup, Validators } from '@angular/forms';
export class AppComponent implements OnInit {
   form: FormGroup;
   constructor(){}
   ngOnInit(){
     this.form = new FormGroup({
       name: new FormControl('', [Validators.required, Validators.minLength(2)]),
       lname: new FormControl('', [Validators.required, Validators.minLength(2)])
     });
   }
 ....
 }

模板:

<form [formGroup]="form" (ngSubmit)="submit()">
    Name: <input type="text" formControlName="name">
    Last Name: <input type="text" formControlName="lname">
    <button type="button">Add a Person</button>
    <button type="submit">Submit</button>
</form>

有没有办法检查是否需要控制？

当我实现它接受一个专用表单字段部件的问题出现FormControl，并不仅input也验证错误。由于某些字段是必填字段，因此最好让用户知道是否需要*。

有没有一种方法来检查@Input() control: FormControl的Validators.required，并显示一个星号？

我试图找出在 Angular 中实现跨领域验证的最佳方法。

例如，我有一个选择字段，它使另一个字段成为必填字段。

我希望能够：

• 如果无效，更改字段的边框颜色
• 每当它成为必需时，在字段前显示 *
• 显示一条特定的错误消息，说明违反了哪些验证规则。

到目前为止，我想出了三个解决方案，但它们对我来说并不那么令人信服。

• 收听选择字段更改并更新第二个字段的验证器。
• 监听两个字段的变化并手动执行 setErrors
• 将验证提升到 formGroup（这可能会感觉非常麻烦，因为验证状态现在存储在 formGroup 中，而不是直接在 formControl 中可用）。

这是一个Stackblitz实现，它演示了我的调查。