标签: angular-reactive-forms

使用 primeNg 下拉组件，我尝试使用初始值初始化下拉列表，但没有成功，我正在使用反应式方法。

我检查了 primeNg 文档和演示 - 几乎所有示例都使用模板驱动，我希望模型驱动也如此。

我可以使用列表中的值呈现下拉列表，但所选项目不是我在表单中声明的​​项目，而是列表中的第一项。

我的代码：模板

    <div [formGroup]="formGroup">
      <p-dropdown [options]="results"
                 formControlName="second"
                (onChange)="onChangeHandler($event)"
                optionLabel="label">
       </p-dropdown>
    </div>

成分

  this.second = new FormControl('second');
  this.formGroup= this.builder.group({
            second: this.second
        });


    this.results = [];
    this.results.push({ label: 'First Data', value: "first" });
    this.results.push({ label: 'Second Test Data', value: "second" });
    this.results.push({ label: 'Third Data', value: "third" });

请指教。

如果有人可以分享模型驱动中 primeNG 下拉组件的工作示例，那就太好了。这些值应该具有键、值属性，如我的示例中所示。

如果我在模板中放置一个实现 ControlValueAccessor 接口的自定义输入并绑定到其更改事件，如下所示：

  <input-app [value]="'initialVal'" (change)="onChange($event)"></input-app>

由于我的自定义输入不会在模糊时触发任何事件（需要明确的是，您必须专注于输入，更改它，然后模糊，然后该事件将出现在控制台中）。

<input
    type="text"
    [value]="value"/>

该onChange()方法将被调用，我不明白为什么会出现这种情况。

这是一个plnkr

我正在学习在 Angular 6 中使用反应式表单，所以如果这个问题很愚蠢，请原谅我，但这是我的问题：

我想监视反应形式中某个值的变化，因为当发生变化时，我需要运行一些逻辑来根据新值重新计算内容。所以我尝试这样做：

this.inputGroup = formBuilder.group({
  myControl: 'something'
});

this.inputGroup.get('myControl').valueChanges.subscribe(newVal => {
  console.log("new value", newVal); //Prints the correct new value
  console.log("actual value", this.inputGroup.value.myControl); //Prints the previous (old) value!

  this.someFuncThatExpectsTheValuesToBeUpToDate(); //This will find the OLD value inside this.inputGroup.value.myControl, instead of the new one!
});

但是，正如您从我在代码中放入的注释中看到的那样，这不起作用，因为valueChanges似乎在模型中的值实际更改之前被调用！这是有意的行为吗？方法签名valueChanges表示：

每当控件的值在 UI 中或以编程方式发生变化时，都会发出一个多播可观察对象。

所以我假设它是在表单中的值更改后调用的，但显然不是......这是正确的吗？如果是这样，我如何检测控件中的值何时实际发生变化？

编辑：对于为什么我希望我的函数直接从 Form 组访问数据，而不是将新值传递给函数本身，似乎存在一些困惑（一如既往，SO :D）。这很容易解释：该函数从多个表单组收集数据并使用这些数据进行一些辅助计算。通过直接从表单组访问数据，该函数是通用的，可以从任何地方调用。如果我开始在那里放置输入参数，这就会中断。举个例子：

someFuncThatExpectsTheValuesToBeUpToDate(){
  let val1 = inputGroup.value.myControl;
  let val2 = someOtherFormGroup.value.myOtherControl;
  let val3 = yetAnotherFormGroup.value.someOtherControl;
  //do something with the vals
} …

在我的Angular 7应用程序中，我以反应形式使用 Angular 材料的mat-select组件。

视图如下所示：

<mat-form-field class="col-md-3" color="warn">
   <mat-select placeholder="Selectionner la boutique"
             id="libelleShop"
             [(value)]="selectedlibelleShopoValue"
             ngDefaultControl
             formControlName="libelleShop"
             (selectionChange)="onShopSelectionChanged($event)">
             <mat-option *ngFor="let shop of shopsList"
                          [value]="shop">
                {{shop.storeName}}
            </mat-option>
  </mat-select>

MD数据如下：

shopsList= [
{
    'edoId': '2119',
    'storeName': 'AIX LES BAINS'
  },
  {
    'edoId': '2123',
    'storeName': 'ANNEMASSE'
  },
  {
    'edoId': '2460',
    'storeName': 'ALENCON'
  },
  {
    'edoId': '2478',
    'storeName': 'Grand Evreux Carrefour'
  },
  {
    'edoId': '2632',
    'storeName': 'DESTRELAND'
  }
]

第一次加载后，选项成功显示在选择下拉列表中，并且我有一个按钮用于在单击时强制选择垫子的值。

我已经尝试过这个：

onClick(){
    let shopObjToDisplay = {};
    shopObjToDisplay['edoId'] = '2460';
    shopObjToDisplay['storeName'] = …

我在表单上有 2 个输入，一个名为“ageMonths”的数字输入，以及一个名为“dateOfBirth”的日期选择器。

我希望用户能够输入年龄的月份，或使用日期选择器选择出生日期 (dob)。如果他们从日期选择器输入 dob，我希望月份字段更新为以月为单位的年龄。如果他们输入以月为单位的年龄，我希望日期选择器跳转到该日期。我正在使用反应形式。

我添加了一个类级别变量来保存一个切换，每次任一控件的值发生更改时都会读取并设置该切换。但这并没有按预期工作，我认为是由于事件没有按照我期望的顺序触发。

我需要做什么才能使这项工作成功？

我的代码是：

ignoreDateUpdate = false;
form: FormGroup;
...
constructor(...){
this.form = new FormGroup({
    dateOfBirth: new FormControl({ value: new Date()}),
    ageMonths: new FormControl({ value: 0 }),
    ...
});
...
this.form.get('ageMonths').valueChanges.subscribe(
m => {
    if (ignoreDateUpdates) {return};
    ignoreDateUpdates = true;
    <code to set DateSelectorValue>
    ignoreDateUpdates = false;
    });
this.form.get('dateOfBirth').valueChanges.subscribe(
dob => {
    if (ignoreDateUpdates) {return};
    ignoreDateUpdates = true;
    <code to set MonthsInput>
    ignoreDateUpdates = false;
});
}

在使用 formBuilder 和 ReactiveForms 的 Angular 7.x 中，我尝试将验证器放入基于用户角色的表单中。因此，当用户有不同的 时role，他/她需要输入一个字段。我将该用户存储在类中存储的变量中。

我不想将验证器放在 valueChange 的订阅上，而是放在初始构建上。我怎样才能做到这一点？下面是一些代码。

 buildForm(): void {
    this.accountForm = this.formBuilder.group({
      firstName: [this.user.firstName, Validators.required],
      initials: [this.user.initials, Validators.required],
      lastNamePrefix: [this.user.lastNamePrefix],
      lastName: [this.user.lastName, Validators.required],
      cellPhoneNumber: [this.user.cellPhoneNumber], <-- make this one required if the role of the user is x
      ]),
    });
  }

我有以下 Angular 7 形式：

ngOnInit() {

  this.organizationId = 1; // Used for testing

  this.form = this.formBuilder.group({     
    name: [''],
    organizationId: [{ value: this.organizationId, disabled: this.enableOrganizationChange }],
    start: ['']
  });

}

在 HTML 中我使用的是Selectfor OrganizationId。它按预期被禁用。

然而，提交时该值null不是 1：

onSubmit() {

  if (this.form.valid) {

    this.submitting = true;

    console.log(this.form.value.organizationId);

    let request: Request = { 
      name: this.form.value.name,
      organizationId: this.form.value.organizationId.value,
      start: this.form.value.start
    };

  }

}

为什么记录的值是null而不是1？

我使用禁用只是为了避免用户更改值。

但我仍然需要提交时的值...

inputField: new FormControl('', [Validators.required])

当用户在字段中输入“0”时，所需的错误将应用于控件。

零应该被视为一个值。

有没有例子how to implement multiple selection and reactive form ?

我试图在 上设置所选项目（从数据库检索）multiselect-dropdown，它将更新显示的项目（视图），但会引发以下错误：

core.js:12501 ERROR TypeError: control.registerOnChange is not a function
    at setUpModelChangePipeline (forms.js:2064)
    at setUpControl (forms.js:2007)
    atFormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl 
    (forms.js:4969)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl 
    (forms.js:5572)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges 
    (forms.js:5491)
    at checkAndUpdateDirectiveInline (core.js:18533)
    at checkAndUpdateNodeInline (core.js:19801)
    at checkAndUpdateNode (core.js:19763)
    at prodCheckAndUpdateNode (core.js:20304)
    at Object.eval [as updateDirectives] (AddAppointmentsComponent.ngfactory.js:646)

我试图选择新选项时出现错误。

core.js:12501 ERROR Error: Cannot find form control at index 3
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._throwIfControlMissing (forms.js:4001)
    at forms.js:3870
    at Array.forEach (<anonymous>)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValue (forms.js:3869)
    at updateControl (forms.js:2059)
    at MultiSelectComponent.onChangeCallback …

 this.form = this.fb.group({ 
  prop1: '',
  prop2: ''
});

this.form.valueChanges.pipe(startWith(null), pairwise())
  .subscribe(([prev, next]: [any, any]) => {
    console.log('PREV2', prev);
    console.log('NEXT2', next);
  });

使用此代码我可以获得以前的值和当前值。我想要的是有什么方法可以获取更改的字段、上一个值和当前值。

就像字段更改名称：prop1，上一个值：“”，当前值：“下一个值”