标签: angular-forms

1. 我有一个ImageHandler实现ControlValueAccessor.
2. ImageHandler应该在另一个组件中动态生成，并且视图将被嵌入。输入和输出可以毫无问题地设置。但如何应用formControl到嵌入的视图或组件上。

<image-handler [formControl]='fControl'></image-handler>

主要问题是这个 formControl 必须应用于图像处理程序本身，否则它可以通过作为fControl输入传递并在ImageHandlerComponent.

当前的解决方法：创建一个WrapperComponentforImageHandler或任何其他类似的组件。这些基于参数的包装器显示带有表单控件的特定元素。 <image-handler *ngIf='isImagehandler' [formControl]='fControl'></image-handler> ...

这个包装组件可以动态创建，没有任何问题。但这似乎不是一个真正的解决方案。

我正在阅读https://angular.io/guide/forms。

我的代码：

  <!-- Min price -->
  <div class="form-group">
    <label for="minprice">Min price</label>
    <input type="number"
           min="0"
           class="form-control" id="minprice"
           required
           [(ngModel)]="model.minprice" name="minprice"
           #minprice="ngModel">
    <div [hidden]="minprice.valid"
         class="alert alert-danger">
      Min price is required
    </div>
  </div>

  <!-- Max price -->
  <div class="form-group">
    <label for="maxprice">Min price</label>
    <input type="number" class="form-control" id="maxprice"
           required
           min="0"
           [(ngModel)]="model.maxprice" name="maxprice"
           #maxprice="ngModel">
    <div [hidden]="maxprice.valid"
         class="alert alert-danger">
      Max price is required
    </div>
  </div>

我有两个问题：

1、min="0"好像不行。当我输入时-1，没有显示错误消息。

2、如何验证minprice小于maxprice？

欢迎任何提示。谢谢

我的网站上有一个表格（人名、姓氏、出生日期、性别、公民身份等）。我的问题是我如何观察整个形式的变化并从观察中得到两件事：

• formControl 及其当前状态

• 处理的 formControl 的当前值

  前缀 {{availablePrefix}}

        <div class="col">
          <label for="firstName">First Name<span style="color: red"> *</span> </label>
          <input formControlName="party.firstName" type="text" autocomplete="off" id="firstName"/>
        </div>
  
        <div class="col">
          <label for="middleName">Middle Name</label>
          <input formControlName="party.middleName" type="text" autocomplete="off" id="middleName" maxlength="1" />
        </div>
  
        <div class="col">
          <label for="lastName">Last Name<span style="color: red"> *</span> </label>
          <input formControlName="party.lastName" type="text" autocomplete="off" id="lastName"/>
        </div>
  
        <div class="col">
          <label for="suffix">Suffix</label>
          <select formControlName="party.suffix" id="suffix">
            <option [value]="availableSuffix" *ngFor="let availableSuffix of availableSuffixes">{{availableSuffix}}
            </option>
          </select>
        </div>
      </div>
    </form>
  

  Run Code Online (Sandbox Code Playgroud)

感谢您的任何帮助

我有一个名为 的组件demo，演示组件有 3 个输入字段和一个按钮。像这样：

单击按钮（即提交）后，我导航到另一个名为 的组件home。这个场景对我来说效果很好，但我添加了一些对名字/姓氏和电子邮件的验证。

如果用户输入所有必需的输入字段，则只有它才能导航到另一个组件（即主页）。但它在没有输入/验证所需输入字段的情况下进行导航。

在冲浪时我得到了一些例子：

1)示例 1
2)示例 2

但这些都是为了template-driven forms. 我正在使用反应形式。

这是Stakcblitz 演示。

我需要首先调用 API 获取表单中的一些值，然后提交它。我喜欢避免使用带有隐藏输入的表单，并希望即时创建它。我的伪代码

submitMyform() {
  //first i call an API and get some data
  var mydata = this.http.get()...

 this.signForm = new FormGroup({
  'Name': new FormControl(mydata.name),
  'Age': new FormControl(mydata.age)   
 });

  this.signForm.submit() //Wished this method existed
}

我希望我的浏览器重定向到我提交表单的页面。

编辑：对不起..！我主要关心的是如何提交此表格。不是获取数据并填充表单。我的代码只是一个模板..这是我缺少的 this.signForm.submit() 方法

我有两个单选按钮组，我向其中添加了角度形式控件。我遇到的问题是，当我添加控件时，单选按钮分组消失了。此外，当我检查单选按钮时，它的name属性也消失了。结果是我无法再在不同的单选按钮组之间正确切换。我怎样才能解决这个问题？

示例： https: //stackblitz.com/edit/angular-qdqnmo

TS：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  formData = {
          "questions": [
            {
              "refCode": "Question1",
              "answers": [
                {
                  "refCode": "Question1Answer1",
                  "selected": true
                },
                {
                  "refCode": "Question1Answer2",
                  "selected": false
                }
              ]
            },
            {
              "refCode": "Question2",
              "answers": [
                {
                  "refCode": "Question2Answer1",
                  "selected": false
                },
                {
                  "refCode": "Question2Answer2",
                  "selected": false
                },
                {
                  "refCode": …

this.form = this.fb.array([
  this.fb.group({ 
    username: [null, Validators.required]
  }),
  this.fb.group({ 
    username: [null, Validators.required]
  }),
  ...
], uniqueUsernameValidator)

const uniqueUsernameValidator = control => {
  // find duplicate
  
  // when flagging the error
  control.get('0.username').setErrors(ifThereIsAnError) // where `ifThereIsAnError` could be null
}

以某种方式uniqueUsernameValidator静默required子表单字段指定的验证。如何解决这个问题呢？

为了简单起见，在构建两列表单时，我使用弹性框将其构建在两个单独的 div 中。然而，该表格是从左到右读取的，即名字位于第一个分区的顶部，姓氏位于第二个分区的顶部。如果用户使用 Tab 键在输入之间移动，则 Tab 键将在表单中向下移动而不是横向移动。这是我的疏忽，但我想知道输入之间的选项卡是否可以设置为与默认值不同。也许一张图片会有帮助。

所以我想将其更改为制表符。我该怎么做呢？另外，实际的表单比下面显示的更复杂，所以我不想重建 html。

我的 HTML

<div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="space-between center">
 <div fxFlex="40">
   <mat-form-field class="formFieldLeft">
    <div class="is-size-7 has-text-grey-light mbxs">First Name</div>
    <input matInput formControlName="firstName">
   </mat-form-field>
<mat-form-field class="formFieldLeft">
  <div class="is-size-7 has-text-grey-light mbxs">Email Address</div>
  <input matInput formControlName="email">
</mat-form-field>
<mat-form-field class="formFieldLeft mblg">
  <div class="is-size-7 has-text-grey-light mbxs">Company Phone Number</div>
  <input matInput formControlName="companyPhoneNumber">
</mat-form-field>

<div fxFlex="60">
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Surname</div>
    <input matInput formControlName="lastName">
  </mat-form-field>
  <mat-form-field class="formFieldRight">
    <div class="is-size-7 has-text-grey-light mbxs">Job Title</div>
    <input matInput formControlName="jobTitle">
  </mat-form-field>
  <mat-form-field class="formFieldRight mblg">
    <div …

我是 angular8，我在表单组内有一个表单数组，但我想检测某个输入的新更改。

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({
        requestfor     : new FormControl(''),
        remarks        : new FormControl('')
    })}

我必须检查 formarray 值中每个值发生变化的数据。但如果我使用，我会收到错误

this.makeForm.value.details.get('requestfor').valueChanges

错误是

ERROR TypeError: Cannot read property 'valueChanges' of undefined

如何获取表单数组值内的值

如何获取该值......

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-register',
  templateUrl: './user-register.component.html',
  styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {

  registerationForm: FormGroup = new FormGroup({});
  constructor() { }

  ngOnInit() {
    this.registerationForm = new FormGroup({
      userName : new FormControl(null, Validators.required),
      email : new FormControl(null, [Validators.required, Validators.email]),
      password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
      confirmPassword : new FormControl(null, [Validators.required]),
      mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
    }, this.passwordMatchingValidatior);
  }
  passwordMatchingValidatior(fg: FormGroup): Validators{
    return this.registerationForm.get('password').value === …