标签: angular-reactive-forms

Angular 4中有一个反应形式,某些控制应该在某个时刻以编程方式设置.

this.form = formBuilder.group({
  foo: ''
});
...
this.form.controls.foo.setValue('foo');

如何控制原始/脏状态？目前我正在使用两者form和foo原始状态,例如:

<form [formGroup]="form">
  <input [formControl]="form.controls.foo">
</form>

<p *ngIf="form.controls.foo.pristine">
  {{ form.controls.foo.errors | json }}
</p>

<button [disabled]="form.pristine">Submit</button>

如果pristine/dirty应该只指定人工交互并且不能以编程方式进行更改,那么这里有什么解决方案？

我想在Angular 4中获取Select控件的选择文本选项.

HTML:

<div class="col-sm-6 form-group">
<label>Industry</label>
<select   class="form-control select"  formControlName="Industry">
<option value="">Please select Value</option>  
<option *ngFor="let industry of industries"  
[ngValue]="industry.ID">{{industry.Name}}  
</option>  
</select> 
</div>


upload.component.ts
this.form.controls['Industry'].valueChanges.subscribe((name) => {
                this.form.controls['IndustryName'].setValue(name);
  });

我正在使用Reactive的formControlName属性.

请建议回顾选定文本选择控件

我正在构建一个反应式角形式,我正试图找到一种方法来触发提交时的所有验证器.如果验证者是同步的,那就没关系,因为我可以获得内联的状态.否则,如果验证器是异步验证器并且尚未触发验证器,则表单上的ngSubmit方法将处于挂起状态.我试图注册一个表单statusChange属性的订阅,但是当我通过markAsTouched函数调用manualy进行验证时它没有被触发.

这是一些片段:

   //initialization of form and watching for statusChanges
   ngOnInit() {
        this.ctrlForm = new FormGroup({
            'nome': new FormControl('', Validators.required),
            'razao_social': new FormControl('', [], CustomValidators.uniqueName),
            'cnpj': new FormControl('', CustomValidators.cnpj),
        });

        this.ctrlForm.statusChanges.subscribe(
            x => console.log('Observer got a next value: ' + x),
            err => console.error('Observer got an error: ' + err),
            () => console.log('Observer got a complete notification')
        )
    }
    //called on ngSubmit
    register(ctrlForm: NgForm) {
            Forms.validateAllFormFields(this.ctrlForm);
            console.log(ctrlForm.pending); 
            //above will be true if the async validator …

我在角度2(4.1.2)中使用反应形式

我有一个布尔属性,我不想有一个默认值,但它应该是必需的.

这就是我创建表单的方式:

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
        payedOvertime: [false, Validators.required],
    });
}

而我的HTML:

<div class="form-group">
    <label>Payed overtime</label>
    <label>
        <input type="radio" name="payedOvertime" formControlName="payedOvertime" [value]="true" />Yes
    </label>
    <label>
        <input type="radio" name="payedOvertime" formControlName="payedOvertime" [value]="false" />No
    </label>
</div>

问题在于,虽然这可以预先选择无线电按钮,但我不想这样,而是必须通过单击其中一个无线电按钮来选择它.如果没有单击任何单选按钮,我希望表单无效.

如标题所述，formGroupName值更改不会更新表单。（点击按钮后，输入中显示的值保持不变）

这是一个plunker。

@Component({
  selector: 'my-app',
  template: `
   <form [formGroup]="myForm">
    <div [formGroupName]="fgn">
        <input [formControlName]="'name'">
    </div>
</form>

<button (click)="formChange()" >Change</button>

{{fgn}}
<br>
{{myForm.value | json}}
  `,
})
export class App {

    private myForm: FormGroup;
    private fgn: String;

    ngOnInit() {
        this.fgn = 'zero';

        this.myForm = this.formBuilder.group({
            zero: this.formBuilder.group({
                name: 'Zero'
            }),
            one: this.formBuilder.group({
                name: 'One'
            })
        });
    }

    formChange() {
        this.fgn = 'one';
    }

    constructor(private formBuilder: FormBuilder) {

    }
}

我正在重置表格。它重置整个表单，但 FormArray 除外。

创建表单并在其中声明 formArray

createForm(){
    this.invoiceForm = this.formBuilder.group({
      'name': ['', Validators.required],
      'gst': [''],
      'currency': [''],
      'addressLine1': ['', Validators.required],
      'addressLine2': [''],
      'city': ['', Validators.required],
      'state': ['', Validators.required],
      'country': ['', Validators.required],
      'postalCode': ['', Validators.required],
      'email': ['', [Validators.required, Validators.email]],
      'invoiceparticulars': this.formBuilder.array([]),
      'isGstshidden' : true
    });

  }

尝试通过重置数据来修改传入数据中表单的详细信息，即使我调用了 reset() 函数 formArray 保留其中以前的条目。

 modifyInvoice(index){

   this.invoiceForm.reset();

   let modifyData = this.modifyInvoiceArray[index];
   console.log(modifyData);

   this.invoiceNumber = modifyData.invoiceNumber;
   this.invoiceForm.patchValue({name: modifyData.address.Name});
   this.invoiceForm.patchValue({email: modifyData.email});
   this.invoiceForm.patchValue({gst: modifyData.GSTnumber});
   this.invoiceForm.patchValue({addressLine1: modifyData.address.AddressLine1});
   this.invoiceForm.patchValue({addressLine2: modifyData.address.AddressLine2});
   this.invoiceForm.patchValue({city: modifyData.address.City});
   this.invoiceForm.patchValue({country: modifyData.address.Country});
   this.invoiceForm.patchValue({postalCode: modifyData.address.PostalCode});
   this.invoiceForm.patchValue({state: modifyData.address.State});
   console.log(modifyData['particulars']);
}

我正在使用 Angular 6 并且我正在尝试执行 patchValue 以使用来自可观察的 http 调用的数据填充我的表单。一切都很好，除了我有一个 secondaryPhone 值，该值可以是 null 填充可观察对象的 json。当它为空时，我收到错误“无法将未定义或空值转换为对象”。我知道如果每个值不为空，我可以单独手动修补它，但是有没有办法加载这个值而不必手动修补每个值？

模型.ts

export class UserInfoModel {
    userId: number;
    dob: Date;
    firstName: string;
    middleInitial: string;
    lastName: string;
    genderTypeId: number;
    ssnLast4: string;
    userAddresses: UserAddress[];
    primaryPhone?: Phone;
    secondaryPhone?: Phone;
    fax?: Phone;
}

export class Address {
    address1: string;
    address2: string;
    city: string;
    stateCd: string;
    zipCode: string;
    internationalAddress: string;
    countryId: number;
}

export class UserAddress {
    userAddressId: number;
    userId: number;
    active: boolean;
    address: Address;
}

export class Phone {
    phoneId: number;
    phoneTypeId: …

我有用于创建和编辑操作的反应式表单。对于编辑，我只是在表单上，​​就像一个魅力，但来自 PrimeNg InputText 组件的浮动标签没有注意到有值填充。当我单击其中一个输入然后对其进行模糊处理时，每个输入都会更新视图并且所有标签都在顶部。patchValue(data)