标签: angular-forms

我有两个组件:ParentComponent和ChildComponent:

parent.component.ts

<form #form="ngForm" (ngSubmit)="onSubmit(form)" novalidate>
     <input type="text" name="firstControl" [(ngModel)]="firstControl" />
     <input type="text" name="secondControl" [(ngModel)]="secondControl" />
     <child-component>
</form>
{{form.value | json}}

child.component.ts

<input type="text" name="thirdControl" [(ngModel)]="thirdControl" />
<input type="text" name="fourthControl" [(ngModel)]="fourthControl" />

现在,{{form.value | json}}回归{ "firstControl": "", "secondControl": "" }并且很清楚.我的问题是:有没有办法从子组件形成enherit表单控件？获取{ "firstControl": "", "secondControl": "", "thirdControl": "", "fourthControl": "" }ParentComponent 的正确方法是什么？可能吗？

我在设置模板驱动的表单输入的值时遇到问题。该值来自一个editMovie对象。我希望在显示时用 editMovie 值填充表单，然后用户可以编辑 editMovie 对象的一部分或保持不变。为没有[(ngModel)]附加到它们的输入正确设置表单值，但不会设置默认值。下面是一个例子：

<div class="form-group">
    <label for="imdb">Edit IMDb ID</label>
    <input #editImdb type="text" class="form-control" name="imdb" [(ngModel)]="editReviewForm.imdb" [value]="editMovie.imdb" required="" />
    <div class="mt-1" style="color:red">
        *required
    </div>
</div>

<div class="form-group">
    <label for="trailer">Edit Youtube Trailer</label>
    <input #editTrailer type="text" class="form-control" name="trailer" value="{{ editMovie.trailer }}" />
</div>

第一个不起作用，而第二个起作用。按照此处的SO 问题，我尝试将 value 属性置于像这样的双向数据绑定中：[(value)]但这不起作用。按照这个SO 问题，我尝试过，[ngValue]但这在浏览器中引发了解析错误Can't bind to 'ngValue' since it isn't a known property of 'input'

有人知道如何绑定模板驱动的表单输入的值吗？

我想从我的复选框中获取值,但我只能得到真或假.

这是我的模板:

<h4>Categories</h4>
<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

这是我的组件

this.categories$ = this.storeService.getAllCategories().pipe(
    map(result => (result as any).data),
    tap(r => console.log(r))
)

我的组件基本上从外部api获取类别列表

我正在尝试以角度发出发布请求，但正如我发现的那样，如果我使用[formGroup]，我就不能这样做，因为提交按钮不执行任何操作。我的代码看起来像这样

<form [formGroup]="formGroup" action="https://someUrl.com" method="post">
    <input type="text" name="lang" id="lang" value="en" formControlName = "lang" >
    <input type="submit" >
</form>

如果我删除formGroup模块，它工作正常。是否存在错误、提交覆盖或其他问题？

我有一个这样的表格：

this.filterFormGroup= this.formBuilder.group({
      gmt_scope: [''],
      priority: [''],
      region: [''],
      category: [''],
      status: [''],
      original_deadline: [''],
      responsibles: [''],
      pms: [''],
      updated_at: ['']
    });

表单通过 API 填充：

<form [formGroup]="filterFormGroup" >
          <div fxLayout="row" fxLayoutWrap="wrap" fxLayout="center center"  class="row">
            <div fxFlex.gt-sm="20" fxFlex="100" class="p-10" fxLayoutAlign="center center">
              <!-- <mat-slide-toggle color="primary" stepper="0" formControlName="gmt_scope">GMT SCOPE</mat-slide-toggle> -->
              <mat-form-field>
                <mat-select  placeholder="GMT Scope" stepper="0" formControlName="gmt_scope" >
                  <mat-option *ngFor="let gmt_scope of gmt_scopes" [value]="gmt_scope.value" >
                    {{ gmt_scope.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div fxFlex.gt-sm="20" fxFlex="100" class="p-10" fxLayoutAlign="start center">
              <mat-form-field>
                <mat-select placeholder="Priority" stepper="0" formControlName="priority">
                  <mat-option …

我正在尝试创建带有角度形式的 PrimeNg 可编辑表格。

app.component.ts（这是最小的可重现代码）

export class AppComponent implements OnInit {
    epForm: FormGroup;
    range: FormArray;

    constructor(private fb: FormBuilder,){
    }
    ngOnInit() {
        this.epForm = new FormGroup({});
        this.epForm.addControl('range', new FormArray([]));
        this.range = <FormArray>this.epForm.get('range');
        this.range.push(
        this.fb.group({
            type: ['X1 Gene']
        })
        );
    }
}

和 html 文件是

<form [formGroup]="epForm" novalidate>
    <p-table [value]="epForm.controls.range.value" [rows]="10" [responsive]="true">
        <ng-template pTemplate="header">
            <tr> Range </tr>
        </ng-template>
        <ng-template pTemplate="body" let-i="rowIndex">            
            <tr [formGroupName]='i'>
                <td >
                    <input type="text" pInputText formControlName="type" />
                 </td>
             </tr>
        </ng-template>
      </p-table>
</form>

我尝试使用上面的代码显示内容，但我无法编辑 Input 标签。我打开检查元素并检查它，只有tbody键更新。

我删除了[formgroup]='i'并在控制台中检查它我收到以下错误 …

当我通过以下方式获取反应形式的值时有什么区别：

this.someForm.controls['firstName'].value
this.someForm.get('firstName').value

public someForm: FormGroup = this.formBuilder.group({
  firstName: ['', Validators.required],
});

this.someForm.controls['firstName'].value
this.someForm.get('firstName').value<br>

上面是我的表单以及从表单获取值的两种不同方法。但是两种方式之间有什么区别（如果有的话）？

我知道如果我在模板中使用方法调用，它会一遍又一遍地执行（不理想）。我已经通过使用纯管道和记忆方法的组合解决了这个问题。但我也在使用反应式表单，并在我的模板中使用 myFormGroup.get('myFormControl').value 来获取值。这是否也会像我的组件中的方法一样重复执行，或者 Angular 是否有适当的策略来防止这种情况发生？一个用法示例是使用 *ngIf 并让条件基于表单的值。

此外，我目前没有遇到任何性能下降，但我想在使用此应用程序走得太远之前以最佳方式实现这一点（并且只是好奇）。

我可以轻松地更新它以直接引用表单对象上的属性，我只是更喜欢方法调用的语法。任何见解都会有所帮助，谢谢！

我正在使用 Angular8 和反应式形式。我的 ngOnInit 是：

ngOnInit(): void {
  this.makeForm = this.fb.group(
    year: ['', Validators.required],
    amount: ['', Validators.required],
    desc: ['', Validators.required],
    details: new FormArray([
      this.det(),
    ]
  );
}

det() {
  return new FormGroup({
    for: new FormControl(''),
    remarks: new FormControl('')
  });
}

我有来自后端的数据来修补数组：

 {
  "amount": 9000,
  "year": 1996,
  "id": 1,
  "desc": "P1",
  "details": [
    {
      "id": 1,
      "remarks": "ok",
      "for": "1"
    },
    {
      "id": 24,
      "remarks": "OK",
      "for": "1"
    },
    {
      "id": 25,
      "remarks": "OK",
      "for": "1"
    }
  ]
 }

我通常用这种方法修补值：

getppredit() …

我有一个工作角度形式，在两个条件内重复模板，所以我将其移到一个公共位置并定义 ngContainer 通过传递变量来显示值，但是在模板内部，代码无法找出形式我收到以下错误

BulkEditComponent.html:28 ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and pass it an existing FormGroup instance (you can create one in your class).

模板

 <h5 mat-dialog-title>
   Edit
  </h5>
  <div mat-dialog-content class="body p-10">
    <div *ngFor="let item of keyList;let i=index" [formGroup]="editForm">

      <div class="left" *ngIf="i%2 == 0">
        <ng-container *ngTemplateOutlet="columnData;context:{item:item,group: editForm}"></ng-container>
      </div>

      <div class="right" *ngIf="i%2 == 1">
        <ng-container *ngTemplateOutlet="columnData;context:{item:item,group: editForm}"></ng-container>
      </div>

    </div>
  </div>
  <mat-dialog-actions class="align-right">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-flat-button color="primary" …