标签: formarray

我正在研究Angular反应形式。这是我的组件类代码：

ngOnInit(){
        this.reviewForm = this.fb.group({            
            'controlArray': new FormArray([])
        });        
        this.showDefaultForm();                     
    }

addForm() {
    (<FormArray>this.reviewForm.get('controlArray')).push(this.fb.group({
        controlType: control.controlType,
        options: control.options,

    }));
}

我收到TypeError：this.validator不是与此相关的函数。我认为这是由于将字符串数组（即control.options）分配为FormControl的值。如果我将其设置为FormArray，则此错误将解决，但是我在将其作为FormArray处理为模板时遇到了问题。请告诉我是否不使用FormArray，可以将字符串数组作为值分配给FormControl吗？如果没有，那么如何在模板中将其作为FormArray处理。谢谢

我有一个看起来像这样的反应角形式。

 <form [formGroup]="myForm">
      <div *ngFor="let Repo of Repos;">
           <fieldset>
                <legend>{{Repo.name}}</legend>
                    <div class="checkbox checkbox-success">
                       <input
                            [id] = "Repo.id"
                            type="checkbox"   (change)="onChange(Repo.User,Repo.Commits,Repo.Requests,Repo.Contributors, Repo.Languages,Repo.Branches,Repo.Langs,$event.target.checked)">
                              <label [for] = "Repo.id">
                                 Select This Repository
                              </label>
                     </div>
            </fieldset>
       </div>
 </form>

以下是打字稿文件：

export class AddUserComponent implements OnInit {
      githubUserResponse;
      githubReposResponse;
      myForm = new FormGroup({});
    ngOnInit(){
       this.myForm = new FormGroup({
            'userRepoData' : new FormGroup({
              'githubusers': new FormGroup({
                'username': new FormControl(null),
                'html_url': new FormControl(null),
                'name': new FormControl(null),
                'company': new FormControl(null),
                'location': new FormControl(null),
                'user_created_at': new FormControl(null),
                'user_updated_at': new FormControl(null),
                'public_repos': new …

我正在尝试使用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: '' …

我目前正在与 Angular 表单数组作斗争。

我有一个表单，可以在其中动态添加字段。

我已经创建了表单对象：

this.otherDataForm = this.fb.group({
});

我添加这样的动态字段：

addField(field: CustomFormField): void {
    this.otherDataForm.addControl(id_campo, new FormControl('', Validators.required));
}

我遍历这些字段：

<form *ngIf="selectedProfile" [formGroup]="otherDataForm">
      <div class="mb-3" *ngFor="let field of fields; let i = index">
           <label>{{field.descripcion}}</label>
           <input class="form-control" [formControlName]="field.id_campo" type="number">
      </div>
</form>

但是，如果需要该字段，我似乎无法控制每个字段的错误以显示验证消息。

任何人都可以帮我解决这个问题吗？也许有更好的方法来做到这一点。

嘿，需要帮助处理 Angular 4 中的响应式表单。我已经声明了下一个 FormGroup：

userForm:FormGroup = new FormGroup ({
    employeenumber: new FormControl(),
    name: new FormControl(),
    lastname: new FormControl(),
    birthdate: new FormControl(),
    phone: new FormControl(),
    email: new FormControl(),
    username: new FormControl(),
    password: new FormControl(),
    blocked: new FormControl(),
    departments: new FormArray([
        new FormControl()
    ])
});

但我想在部门数组中嵌套其他数组。有这样的事情：

departments: [
    { department: 'test', roles:['rol1', 'rol2'] }
]

可以嵌套 FormArrays 吗？或者这样做的最佳方法是什么。

我有一组语言供用户选择，还有一种默认语言可供选择。选择默认语言后，我想确保以编程方式选中该语言的复选框。

我不确定如何在语言的 FormArray 上使用 patchValue。

组件.ts

import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
...

constructor(...) {
    this.languages = ['English', 'Spanish', 'Mandarin', 'Klingon'];

    this.myForm = new FormGroup({
        languages: this.createLanguagesControl(),
        defaultLanguage: new FormControl('', Validators.required)
    });
}

createLanguagesControl() {
    const controls = this.languages.map(language => {
        return new FormControl(false);
    });
    return new FormArray(controls);
}

defaultLanguageSelection() {
    let formValues = this.myForm.value;
    console.log('defaultLanguageSelection', formValues.defaultLanguage);

    let i = 0;
    for (let language of this.languages) {
        if (language == formValues.defaultLanguage) {              // find the index of …

我想从所有表单数组的实例中获取 'onduty' 值。我在 html 中试过这个：

<span *ngFor="let day of workDayandTime.controls;let i= index;">
 {{day.onduty}}
</span>

但我无法获得任何价值。

这是 json 中 workDayandTime 的值： workDayandTime 表单数组

形式 ：

<span *ngFor="let day of workDayandTime.controls;let i= index;">
 {{day.onduty}}
</span>

短时paper.ts

class employerShortForm extends FormGroup {
    constructor(fb: FormBuilder) {
        super({
            employer: fb.group({
                name: new FormControl('',Validators.required),
            }),
            employee: fb.group({
                name: new FormControl('', Validators.required)
            }),
            contractStart: new FormControl(''),
            contractEnd: new FormControl(''),
            workAddress: new FormControl('', Validators.required),
            work: new FormControl('', Validators.required),
            workDayandTime: fb.array([]),
            wageType: new FormControl(''),
            wage: new FormControl(''),
            bonus: new …

我正在 Angular 中创建动态反应形式。但是在下面的代码中， level.name 不被接受，因为编译器不允许在 group() 内给出变量。它只允许固定值，如 - state、city 等而不是 level.name 变量，其中 level 是一个具有 name 字段的对象......

this.countryNextLevelsBeforeMan.forEach(**level** => {
  let l2 =<FormArray> this.l1FormGroup2.controls["l2"]; 
  l2.push(this.formBuilder.group({
    **level.name** : null   --> compilation error on this line as variable not getting allowed
  }))
});

在 group 方法中，我想将控件名称作为变量 (level.name)。在 for 循环中，如果 level 是 {"name" : "State" , "id" : 2} 然后我想像下面那样设置它，

l2.push(this.formBuilder.group({
        **State** : null    --> No compilation error if we give fixed value
     }))

（而不是 'State' 我希望它由 level.name 动态分配，因为 level.name 可以是 City、Street 等）

请帮忙！！！

您好，我在编译项目时遇到错误。我正在使用 Angular 5 和 TypeScript。

我正在从项目根文件夹提供 npm run build ，以下是我收到的错误。

bash-4.2$ npm run build
> primecast@5.0.1 build /tmp/tester001/mep-private/ui
> ng build --prod

 10% building modules 3/4 modules 1 active ...ter001/mep-private/ui/src/styles.scssNode#moveTo was deprecated. Use Container#append.
Date: 2019-12-20T11:17:00.575Z                                                     
Hash: 175df3f370fd7976d3c4
Time: 16261ms
chunk {0} styles.bb4ae0c2b0dd75fdc7ee.bundle.css (styles) 159 kB [initial] [rendered]
chunk {1} polyfills.3bc34265385d52184eab.bundle.js (polyfills) 86 bytes [initial] [rendered]
chunk {2} main.e402deade8b026b7d50e.bundle.js (main) 84 bytes [initial] [rendered]
chunk {3} inline.9d07561b59257af76b95.bundle.js (inline) 1.45 kB [entry] [rendered]

ERROR in src/app/accounts/account-service-provider-clients/account-service-provider-clients.component.html(17,28): : Property 'controls' does not …