标签: angular-reactive-forms

我正在 Angular 11 中构建一个反应式表单。它分为多个 div，项目所有者希望在每个 div 中进行一些重复输入，以便用户可以编辑某个字段 A 和所有 div 的输入' 字段 A 的输入将显示更新后的值。

我喜欢科里兰的方法：

<input [formControl]="myCtrl" [value]="myCtrl.value" />
<input [formControl]="myCtrl" [value]="myCtrl.value" />
<input [formControl]="myCtrl" [value]="myCtrl.value" />

formControlName...但我想用而不是实现这一点，formControl以便我可以利用formGroups （而不是让每个表单控件成为我的组件对象的成员）。然而，缺乏对实际的引用myCtrl会破坏 处的绑定[value]。

有没有一个好的策略让我仅按名称指定表单控件并使所有这些输入都使用单个控件？或者，当有很多不同的集合需要同步时，是否有一种不同的好方法来同步 Angular 反应形式的输入？

我已经构建了一个名为 的控件TextBox，为了简单起见，我将只在此发布该控件的相关部分。

    @Component({
      selector: 'app-textbox',
      template:
      `
        <input [(ngModel)]="value" [disabled]="disabled" />
      `,
      styleUrls: ['./textbox.component.css']
    })
    export class TextboxComponent implements OnInit, ControlValueAccessor {
    
      constructor() { }
      writeValue(obj: any): void {
        this._value = obj;
      }
      registerOnChange(fn: any): void {
        this.onChange = fn;
      }
      registerOnTouched(fn: any): void {
        this.onTouch = fn;
      }
      setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
      }
    
      disabled = false;
    
      onChange:()=>{}
      onTouch:()=>{};
    
      private _value:string;
      public get value():string {
        return this._value
      } 
      public set value(value:string){
        this._value = value;
      } …

我在 Angular 版本 10 中使用反应式表单。但出现以下错误。

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.\n\n       Example:\n\n       \n    <div [formGroup]="myGroup">\n      <input formControlName="firstName">\n    </div>\n\n    In your class:\n\n    this.myGroup = new FormGroup({\n       firstName: new FormControl()\n    });\n    at Function.missingFormException (forms.js:1700:1)\n    at FormGroupDirective._checkFormPresent (forms.js:5632:1)\n    at FormGroupDirective.ngOnChanges (forms.js:5454:1)\n    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2373:1)\n    at callHook (core.js:3285:1)\n    at callHooks (core.js:3251:1)\n    at executeInitAndCheckHooks (core.js:3203:1)\n    at selectIndexInternal (core.js:6324:1)\n    at \xc9\xb5\xc9\xb5advance (core.js:6306:1)\n    at PatientInformationComponent_Template (template.html:39:34)\n

我的示例 HTML 代码如下。

<div [formGroup]="MyForm">\n      <input formControlName="firstName">\n      <input formControlName="lastName">\n</div>\n

我的TS代码：

export …

我正在尝试实现自定义验证器功能来检查是否输入了电话号码(家庭电话和移动电话).我想在两个字段上显示错误消息,当它们被触摸并且没有有效值时,由于某种原因我的代码没有按预期工作.请帮帮我这篇文章.-谢谢!这是stackblitz链接https://stackblitz.com/edit/angular-ve5ctu

createFormGroup() {
   this.myForm = this.fb.group({
     mobile : new FormControl('', [this.atLeastOnePhoneRequired]),
     homePhone : new FormControl('', [this.atLeastOnePhoneRequired])
   });
}

atLeastOnePhoneRequired(control : AbstractControl) : {[s:string ]: boolean} {
  const group = control.parent;
  if (group) {
    if(group.controls['mobile'].value || group.controls['homePhone'].value) {
      return;
    }
  }
  let errorObj = {'error': false};
  return errorObj;
}

我正在尝试将外部库应用于日期时间选择器.我收到如下错误

ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'dateTimeDeparture'
Error: No value accessor for form control with name: 'dateTimeDeparture'

我的代码如下:

模板:

<owl-dateTime-input [(ngModel)]="flightDetails.dateTimeDeparture" name="dateTimeDeparture" [locale]="en" required></owl-dateTime-input>  

零件:

this.en = {
    firstDayOfWeek: 0,
    dayNames: ["Sunday", "Monday", "Tuesday","Wednesday", "Thursday", "Friday", "Saturday"],
    dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
    monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]
};

this.flightDetails = {
    dateTimeDeparture: new Date(2017, 8, …

我有一个Angular Reactive表单.我订阅了它的值更改,并将对父组件发出更改.某些控件可能会被用户禁用.问题是,在发出表单valueChanges时,缺少来自禁用控件的值.我已经设定了一个基本的例子.

选中该复选框并禁用电子邮件输入时,不会记录任何表单控件值.但是我希望获得所有表格值.

虽然在角度5中构建crud应用程序我遇到了一个问题,我如何使用相同的表单生成器但是根据我的需要更改我得到的控件,通过表单添加或更新用户...

这里有一些简单的代码,我会尽量不使事情变得复杂,因为我有很多属性很大的形式......

所以在我的app.component.html我有表格

         <form class="form-horizontal" [formGroup]="form" #myForm="ngForm" 
          (ngSubmit)="save()"> 
                <div class="form-group">
                    <label for="firstName" class="control-label 
                  required">First name</label>
                    <input type="text" id="firstName" class="form-control" 
             formControlName="firstName">


                </div>

                <div class="form-group">
                    <label for="lastName" class="control-label 
            required">Last name</label>
                    <input type="text" id="lastName" class="form-control" 
            formControlName="lastName"> 
                </div>

在我的app.component.ts中

在我的构造函数中我有

    this.form = this.formBuilder.group({ 
        firstName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],
        lastName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],

    });

和save()函数用于提交表单

    save() {
    let formModel = this.form.value;
    formModel.id = this.Id;

    if (this.Id == null) { 
        this._usermanagementservice.addEmployee(formModel).subscribe(() => {

           //function that reloads table with employees
            this.LoadAllEmployees();
        });
    }
    else {
        this._usermanagementservice.updateEmployee(this.Id, …

我正在使用angular5 reactivemodule在我的应用程序中显示一个表单.我还使用了必需的验证器,随后将该字段设置为红色并向用户显示错误信息.

它按预期工作,但是当我使用重置表单时

this.form.reset()

表单显示了需要特定字段的验证错误.我还使用form.markAsPristine()或form.markAsUntouched()来使其工作,但在应用多个可能的对的组合后问题仍然存在.

example.html的

<form [formGroup]="checkForm" (ngSubmit)="submitForm()">
  <mat-form-field>
    <input matInput formControlName="name" placeholder="name" />
    <mat-error *ngIf="checkForm.get('name').errors?.required">
      Name is required.
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput formControlName="email" placeholder="email" />
    <mat-error *ngIf="checkForm.get('email').errors?.required">
      Name is required.
    </mat-error>
  </mat-form-field>
  <button [disabled]="checkForm.invalid" type="submit">add</button>
</form>

example.ts

checkForm  = this.formBuilder.group({
  'name': ['', Validators.required],
  'email': ['', Validators.required]
});

submitForm() {
   this.checkForm.reset();
   // this.checkForm.markAsPristine();
   this.checkForm.markAsUntouched();      
}

任何帮助表示赞赏.

我正在使用角度6

我的HTML是

<form [formGroup]="myForm" >
  <label>
    <input type="text" formControlName="name" placeholder="name" required autofocus >
  </label>
  <label>
    <select name="drop" formControlName="drop">
      <option value="developer"selected >developer</option>
      <option value="designer">designer</option>
      <option value="admin">admin</option>
    </select>
  </label>
</form>

即使我selected在option页面首次加载时在“开发人员”中进行设置，也未选择“开发人员”。我想这是一个小角度的错误，无法正确呈现html，因此我在定义表单时放入了组件：

  myForm = this.formBuilder.group({
    name:['',Validators.required],
    drop:['developer']
  });

而且有效。

真正奇怪的是，当我this.myForm.reset();在另一个位于窗体外部的按钮内执行操作时，“名称”应为空，但下拉列表也完全为空，只是空白，但应显示“ developer”，对吗？

该按钮隐藏了一些元素，应该重置表单，它在表单外部并且确实

  getOtherData(id){
    this.myForm.reset();

这行不通，所以我必须做

this.myForm.setValue({
  name: '',
  drop: 'developer'
});

为了实际重置表格。这是怎么错的select用组合reset？我想使用reset一次并完全重置表单，而不会出现“ hacks”，该怎么办？

谢谢

我有以下问题。单击以检查堆栈闪电。

我在构造函数中设置了反应形式：

this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
});

而且ngOnInti()，我正在获取与关联的数据unit_id。

当我将数据从平台迁移到另一个平台时，不建议使用阿拉伯语的姓氏，但现在是这样。因此，大多数数据将不使用阿拉伯文名称加载。

问题是该按钮始终处于启用状态，而我需要做的是，如果用户要更新此unit_id按钮，则他应该添加阿拉伯语名称，以便随后启用该按钮。

如果表单有效，则启用按钮在加载组件时不会造成伤害。

这是getData()获取数据并设置表单组控件值的方法：

ngOnInit() {
    this.getDataById();
}

getDataById（）：

getDataById() {
    this.showSpinner = true;
    this.auth.getDataById(this.unit_id).subscribe(
      (data) => {
        if (data['info'][0]['total'] == 1) {
          this.noDataBool = false;
          this.showSpinner = false;
          this.family_name_en = data['info'][0]['hh_last_name_en'];
          this.formGroup.controls['family_name_en'].setValue(this.family_name_en);
          this.family_name_ar = data['info'][0]['hh_last_name_ar'];
          this.formGroup.controls['family_name_ar'].setValue(this.family_name_ar);
          this.unit_id = data['info'][0]['unit_id'];
          this.formGroup.controls['unit_id '].setValue(this.unit_id);
    }
} …