angular-forms

问题 I have form with async data binded from server: <form> <input [(ngModel)]="currentService.user.username"> <input [(ngModel)]="currentService.user.email"> </form> It's work only if i add *ngIf="currentService.user" to form, but i want render inputs without value, before i get data from server. But i get errors: 'Cannot read property 'username' of undefined' How can i solve this? Probably, i need something like async pipe to ngModel, but this is does not work, obviously. 回答1: You could Try this

问题 I am learning Angular 5 with TypeScript. I am completely new to it. I am now trying to construct a form and validating it. But it is not working properly. Please see my code below. This is my component. @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.scss'], animations: [routerTransition()] }) export class LoginComponent implements OnInit { loginForm: FormGroup; errors = []; constructor(private fb: FormBuilder, public router: Router,

问题 Please help!! I am finding it very difficult to edit a form. I working with reactive form and adding data to the form and sending to the database works very well. Now I want to query the data in the database so I can edit it and send it again. The data is gotten from the database in form of a json object, I have tried to assign it to a form Group variable so I can display the data in the form and send it but I get errors. I Have also tried displaying the data with the template driven form. It

问题 I am using angular 7, reactive form. I have a requirement to check the existence of particular value on the server to make field valid/invalid. Component Class: Control: valueControl = new FormControl("" ,Validators.required, ), [this.valueIsUnique.bind(this)]); /** * Validator to checking existance/uniqueness * of entered value * @param control */ valueIsUnique(control: AbstractControl): Promise<ValidationErrors|null> | null { if (control && (control.value !== null && control.value !==

问题 I am creating a reactive form in angular. To synchronize the FormControl object from your typescript file to control of form in html file, you need to use formControlName directive. This is done as follows: formControlName="xyz" where xyz is the key of FormControl object defined in typescript file. But in this case, xyz is treated as a string and will not get evaluated. So my doubt is that, since xyz is a key to FormControl object, so it should be evaluated and must used with square brackets

问题 I have a FormArray in a FormGroup and each of the FormArray has multiple FormGroup's and can add them dynamically. I have a Custom Validator where it checks with all the data in each of the FormArray to validate the repetition of data. Currently, it's also validating the initial data with itself which is throwing an error. Is there any way to restrict the error from throwing itself when it's checking the initial data.? It's working fine when new data is added and has same values as the

问题 I have made a DatePickerDirective which is working fine as required. But in order to sync the value of the particular input field on which this directive sits, I have to use value and ngModel attribute both. I wish to use only ngModel how can this be achieved gracefully. Form Element <input appDatePicker type="text" required name="title" value="{{holiday.off_date}}" [(ngModel)]="holiday.off_date" class="form-control" placeholder="01/01/2018"> Component File export class HolidayCreateComponent

问题 I have a feature where I need to send dynamically generated input fields on button click. I have recreated the problem on stackblitz for better understanding. In that app, when I enter resourceQuantity, the resourceId fields are dynamically generated. My issue is to identify those fields individually and send them on server side on single button click. This solution I've found on stackblitz is similar, but in my problem I am not removing or adding on button clicks, but (change) event instead.

问题 I'm currently using ngx-formly to dynamically create a bunch of Angular forms from JSON, which works really nicely. I have a peculiar use case where a custom button on a form, should open a modal dialog containing another form on click, which would also contain a form created using ngx-formly. The example I saw on the ngx-formly site use a custom button, and creates a custom component with .ts files, but I want to avoid that since I would have several forms doing this, and I don't want to

问题 I have created simple reactive form with text input and when form is being submitted I want to pass along image from file input. Every time I google I get tutorials, where they show me how I can upload file, but it is being done without other input field. I understand how to do that, what I don't understand how to submit both my form along with file input in one submission. In my scenario, am I not supposed to user reactive forms and instead simple new FormData() and append every input into