[英]angular form value {} is null in ts file but works in html
我想要的只是让值显示在 ts 文件中。 我有一个名为“listform”的父组件-> childComp“singlecontrol”。 'singlecontrol' tsfile 中的所有值都有效,除非我的图像值进入它返回 null。 几个星期以来,我一直对这个问题感到非常困惑。
单控 ts
import { Component, OnInit, Input, HostListener, AfterViewChecked,ViewChild, AfterViewInit ,ElementRef, Renderer2, OnChanges, Output, EventEmitter ,ChangeDetectionStrategy} from '@angular/core';
import { FormControl, FormArray, FormBuilder, FormGroup, ReactiveFormsModule, ValidationErrors, ValidatorFn, FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, AbstractControl } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { BehaviorSubject, Subscription } from 'rxjs';
import { customValidators } from '../../formfieldbuilder/customvalidators';
@Component({
selector: 'app-singlecontrol',
templateUrl: './singlecontrol.component.html',
styleUrls: ['./singlecontrol.component.scss']
})
export class SinglecontrolComponent implements OnInit {
@Input() data: any;
@Input() control: FormGroup;
public controlEnd:any;
@Input() errorsfile: any;
@Input() auth: any;
public image="null"
public status:any;
constructor( ) {
// this.control.statusChanges.subscribe((info) => {
// console.log(info)
// this.status = info;
// console.log(status)
// })
}
ngOnInit() {
//console.log(errors)
this.status =this.control.get(this.data.name).status
this.controlEnd = this.control.get(this.data.name)
console.log(this.controlEnd)
console.log(this.controlEnd.value)
console.log(this.controlEnd.value)
}
onImagePicksinglecontrol(e, cardname, controlpick) {
const file = (e.target).files[0]
console.log(e.target)
console.log("file")
console.log(file)
const reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = (e) => {
var img:any = new Image;
var url = e.target.result;
img.src = e.target.result;
console.log(reader.result)
this.image =reader.result
console.log("image")
console.log(this.image)
var keyexist = false
img.onload = function() {
console.log(img.width)
console.log(img.width)
console.log(img.width)
console.log(img.width)
console.log(file.name)
console.log(file.size)
console.log(file.type)
var ob = {"64bit":reader.result,"image_structure":{"width":img.width,"height":img.height,"filename":file.name,"filesize":file.size,"filetype":file.type}}
//set value to this ob
controlpick.parent.patchValue({ [cardname]: ob })
console.log("CONTROLPICK")
console.log(controlpick)
controlpick.parent.updateValueAndValidity();
}
}
// this.control.get(this.data.name).patchValue()
// controlpick.parent.patchValue({ [cardname]: file })
// controlpick.parent.updateValueAndValidity();
console.log(this.control)
console.log(this.image)
}
}
我的图像的 this.controlEnd 值 object = null 应该是 {},controlEnd 控件的 rest 不是 Z37A6259CC0489DFF02
显然,在输入()中移动数据时,它没有加载 ts 文件中的值。 在 onInit() 中,我订阅了值以使组件更新为最新的值和状态。
arrayitem[field].statusChanges.subscribe(s=>{
console.log(s)
this.status = i[this.data.name].status
try{
this.status = s}catch{
console.log("NO IMAGE");
}
})
cont.valueChanges.subscribe(i=>{
console.log(i)
console.log(i[this.data.name])
this.status = i[this.data.name].status
try{this.images.push( i[this.data.name].path)}catch{console.log("NO IMAGE")}
console.log(this.images)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.